'Aligning logo with navigation bar

I am trying to create a nav bar which contains a logo and some tabs.

I want the logo to appear on the left and the tabs (a tags) to appear evenly spaced on the right of the logo

Here's an example

LOGO     |    Home   |    About   | Contact Me

This would cover the entire header width

This is what I have for as my html:

.headerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
}

ul {
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

nav {
  width: 100%;
}

img {
  width: 15%;
}
<header>
  <div class="headerContainer">
    <div class="logo">
      <img src="https://via.placeholder.com/2667x571">
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </nav>
  </div>
</header>
htmlcssflexbox


Solution 1:[1]

I've made few changes in CSS and now IMG tag is taking full height and width.

.headerContainer {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border: 1px solid #ccc;
}

ul {
  list-style-type: none;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

nav {
  width: 100%;
}

img {
  width: 100%;
  height: 100%;
}
<header>
  <div class="headerContainer">
    <div class="logo">
      <img src="https://via.placeholder.com/50">
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </nav>
  </div>
</header>

Solution 2:[2]

This gets you closer. You had interior items set to 100%, so the total was too wide.

You also should remove the default left padding from the list.

.headerContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
}

ul {
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
  padding-left: 0;
}

nav {
  width: 85%;
}

.logo {
  width: 15%;
  display: flex;
  align-items: center;
}

.logo img {
  max-width: 100%;
}
<header>
  <div class="headerContainer">
    <div class="logo">
      <img src="https://via.placeholder.com/2667x571">
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </nav>
  </div>
</header>

Solution 3:[3]

made changes in CSS now it aligns correctly.

.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;

}


nav {
    width: 85%;
}

ul {
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
    padding-left:0;
}
<!DOCTYPE html>
<html>

<head> </head>

<body>
    <header>
        <div class="headerContainer">
            <div class="logo">
                <img src="https://via.placeholder.com/50">
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Me</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 prograk
Solution 2
Solution 3

Related Questions