Why is justify-content: flex-start; not working? [duplicate] - html

Question

This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
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>

Answer 1

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>