Why is justify-content: flex-start; not working?

Question

I was making a navbar using flexbox. By default, shouldn't the justify-content property be set to flex-start; ? But the content inside my container is not begining from the start. Here's the output and code:

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

ul {
  list-style-type: none;
}

.container {
  border: 5px solid #dff124;
  display: flex;
  justify-content: flex-start;
}

.container li {
  padding: 10px;
  text-align: center;
  font-size: 2em;
  color: #ffeead;
  background-color: #96ceb4;
}

.search {
  flex: 1;
}

<nav>
  <ul class="container">
    <li>Home</li>
    <li>Profile</li>
    <li class="search">
      <input type="text" class="search-input" placeholder="Search">
    </li>
    <li>Logout</li>
  </ul>
</nav>

It's working fine. But you have set the input container to be as wide as possible. — Paulie_D, Jun 05 '21 at 10:09
You need to remove the default padding from the `ul` element. Add `padding: 0;` to the `ul` element. — Yousaf, Jun 05 '21 at 10:11
I tried removing the styling for the input field. The issue still persists! — Ronald Johnson, Jun 05 '21 at 10:14

score 0 · Accepted Answer · answered Jun 05 '21 at 10:11

That white-space is caused by the default padding of the <ul>. You can remove it by adding: ul { padding-left: 0; }

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

ul {
  list-style-type: none;
  padding-left: 0;
}

.container {
  border: 5px solid #dff124;
  display: flex;
  justify-content: flex-start;
}

.container li {
  padding: 10px;
  text-align: center;
  font-size: 2em;
  color: #ffeead;
  background-color: #96ceb4;
}

.search {
  flex: 1;
}

<nav>
  <ul class="container">
    <li>Home</li>
    <li>Profile</li>
    <li class="search">
      <input type="text" class="search-input" placeholder="Search">
    </li>
    <li>Logout</li>
  </ul>
</nav>

Why is justify-content: flex-start; not working?

1 Answers1