0

I want to have a max 1100px div with spacebetween items but if i center .menu, space between isnt work...

What i can do? (or margin auto?)

.navbar {
  display: flex;
  justify-content: center;
}

.menu {
  max-width: 1100px;
  background: red;
  display: flex;
  justify-content: space-between;
}
<div class="navbar">
  <div class="menu">
    <a href=""><img src="https://www.colacao.es/img/logo.png" width="56px" height="50px"></a>
    <div>
      <a href="">Services</a>
      <a href="">Pricing</a>
      <a href="">Blog</a>
      <a href="">Contacts</a>
    </div>
    <a href="">Log In</a>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Karoly
  • 89
  • 1
  • 10

1 Answers1

1

Since .menu is a block-level element, it is naturally going to take up the maximum width of the row (100%). Therefore, you can set max-width on the element, to limit this behavior and stop at 1100px, or 100%, whichever comes first. As Temani mentioned above, you can center the enter element using margin: auto. I wrote out the margins longhand, since you are concerned with adding auto to only the left and right margins (no need to set top and bottom). 

.menu {
  display: flex;
  max-width: 1100px;  
  background: red;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}
<div class="navbar">
  <div class="menu">
    <a href=""><img src="https://www.colacao.es/img/logo.png" width="56px" height="50px"></a>
    <div>
      <a href="">Services</a>
      <a href="">Pricing</a>
      <a href="">Blog</a>
      <a href="">Contacts</a>
    </div>
    <a href="">Log In</a>
  </div>
</div>
Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61