CODEWITHSUNDEEP
htmlcssflexboxhtml-lists
PleatedPlants
PleatedPlants

Reputation: 13

List item distribution with flexbox - everything pushed to the right

I'm trying to create a very basic navigation bar with a horizontal unordered list and flexbox, but my list items are being shifted to the right and I don't understand why.

In my example, I want the list items to be grouped together and centered in the smaller viewport, and evenly distributed in the larger one. This works as expected, except everything seems shifted slightly to the right. So in the smaller viewport, the content is never quite centered, and in the larger viewport, there's a gap before my first list item.

Using a negative margin helps me in the larger viewport, but not the smaller one.

I'm very new to CSS, so I may have missed something obvious.

.container {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  display: flex;
  list-style: none;
  background: black;
}

.container a {
  text-decoration: none;
  color: white;
  background: red;
}

@media all and (max-width: 600px) {
  .container {
    justify-content: center;
  }
  .container a {
    padding: 10px;
  }
}
<div>
  <ul class="container">
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">WORK</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>

Codepen

Upvotes: 1

Views: 512

Answers (1)

Asons
Asons

Reputation: 87191

ul elements (your container) has a default padding you need to set to 0.

.container {
  display: flex;
  justify-content: space-between;
  list-style: none;
  background: black;
  padding: 0;               /*  added property  */
}

.container a {
  text-decoration: none;
  color: white;
  background: red;
}

@media all and (max-width: 600px) {
  .container {
    justify-content: center;
  }
  .container a {
    padding: 10px;
  }
}
<div>
  <ul class="container">
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">WORK</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions