my TikTok logo doesn't show up in the header and it's not lining up with Name. How do I fix this? Thanks in advance for your help.

HTML :

 <div class="header">
    <h2 class="name">Name</h2>
    <a class="social-icon-header" href="https://www.tiktok.com/@xxx" target="_blank">
        <img class="tiktok" src="images/TikTok-Icon-Logo.wine.svg">
    </a>
</div>

CSS:

.name {
font-size: 250%;
padding-top: 1%; 
 }


/* Social Icon */
.tiktok {
  width: 4em;
  height: auto;
  position: relative;
  float: right;
  }

CodePudding user response：

You're using conflicting float and position relative. Trying removing both of those in the tiktock element. and Trying flex on parent container with align-items.

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.name {
    font-size: 250%;
}

/* Social Icon */
.tiktok {
    width: 4em;
    height: auto;
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>