0

For reference, I am unable to use bootstrap css for this. I am making a navbar with a brand on the left side and nav links that turn pink when you hover over them. This works perfectly fine with just the links but the logo causes the elements to misalign in very weird ways. It pushes the ul down below the frame of the navbar for no discernable reason. I'm wondering why this happens.

Here's a link to the codepen: https://codepen.io/rmullin7286/pen/ExmaZaB

#navbar {
    list-style-type: none;
    background: #2b2b2c;
    margin: 0 0 0 0;
    padding: 0;
    display: inline-block;
}

img {
  height: 50px;
}

#navbar > li {
    display: inline-block;
    padding-left: 15px;
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    color: white;
    font-family: Montserrat;
    margin: 0;
}

#navbar > li:hover {
    background: #F0799F
}
<header style="height: 50px; background-color: #2b2b2c;">
    <img src="https://e7.pngegg.com/pngimages/981/645/png-clipart-default-profile-united-states-computer-icons-desktop-free-high-quality-person-icon-miscellaneous-silhouette-thumbnail.png">
    <ul id="navbar">
        <li><a>About</a></li>
        <li><a>Skills</a></li>
        <li><a>Work</a></li>
        <li><a>Contact</a></li>
    </ul>
</header>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
Ryan Mullin
  • 11
  • 4

1 Answers1

0

Remove height inline-style in header

<header style="background-color: #2b2b2c;"></header>

or reduce li padding

#navbar > li {
    display: inline-block;
    padding-left: 15px;
    padding-top: 16px;
    padding-right: 15px;
    padding-bottom: 16px;
    color: white;
    font-family: Montserrat;
    margin: 0;
}
SmartMan21Cen
  • 76
  • 4