0

I am trying to get the following header in the cleanest way possible. I'm not really bothered if it is via CSS Grid or Flexbox, as long as the solution isn't hacky.

image

I have tried to do this with Flexbox, but I'm stuck, here is my code:

HTML

<nav>
  <div class="container nav__body">
    <ul class="nav__links">
      <li><a href="#" class="nav__link">Products</a></li>
      <li><a href="#" class="nav__link">Our Story</a></li>
      <li><a href="index.html" class="nav__link nav__logo">Home</a></li>
      <li><a href="#" class="nav__link">Blog</a></li>
      <li><a href="#" class="nav__link">Contact</a></li>
    </ul>
    <a href="#" class="nav__cart">Cart</a>
  </div>
</nav>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
}

ul {
  list-style: none;
}

nav {
  background-color: #ACD038;
  height: 100px;
}

.container {
  width: 1024px;
  margin: 0 auto;
  background-color: grey;
  height: 100%;
}

.nav__body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav__links {
  display: flex;
  background-color: firebrick;
}

.nav__link {
  padding: 5px 20px 5px 0;
  color: #fff;
}

I have also created a Codepen.

J86
  • 14,345
  • 47
  • 130
  • 228
  • The technique used here: https://stackoverflow.com/questions/38948102/center-and-right-align-flexbox-elements does not quite center it 100%. https://imgur.com/a/SVg9xsj – J86 Nov 19 '19 at 11:44
  • It looks perfectly centered in your image. Not sure what the problem is. – Michael Benjamin Nov 19 '19 at 23:07

0 Answers0