Aligning list to the left side of container in flexbox - html

Question

So I've just learnt flexbox, however even after stating justify-content: flex-start; the list is not aligned to the left side of the column like so:
Image of the problem
Essentially I would like to align the list to the left side of the #navigation container so that there is not space present like in the image above. Any ideas what to change?
#navigation {
min-height: 50px;
width: 100%;
background-color: #2F4E6F;
}
.navflex {
display: flex;
flex-direction: row;
margin: 0;
list-style-type: none;
justify-content: flex-start;
}
.navflex a {
text-decoration: none;
text-decoration: none;
font-family: 'Open Sans';
font-size: 25px;
color: #FFFFFF;
display: block;
padding: 5px 25px;
text-align: center;
}
#home_button {
width: 38px;
height: 38px;
}
.tilde {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
font-family: 'Open Sans';
padding: 7px 0px;
}
#media all and (max-width: 800px) {
.navflex {
flex-direction: column;
flex-wrap: wrap;
}
.tilde {
display: none;
}
}
<div id="navigation">
<ul class="navflex">
<li>
<img src="images/home_button.png" alt="An icon representing a house." id="home_button">
</li>
<li>Phantom of the Opera</li>
<li class="tilde">~</li>
<li>The Lion King</li>
<li class="tilde">~</li>
<li>Wicked</li>
<li class="tilde">~</li>
<li>Bookings</li>
<li class="tilde">~</li>
<li><a href='#'>Location</a></li>
</ul>
</div>

Answer 1

Add padding: 0; to your ul (= .navflex) to avoid the default list padding. And if that isn't close enough to the left, also add padding-left: 0 to the li elements:
#navigation {
min-height: 50px;
width: 100%;
background-color: #2F4E6F;
}
.navflex {
display: flex;
flex-direction: row;
margin: 0;
list-style-type: none;
justify-content: flex-start;
padding: 0;
}
.navflex li {
padding-left: 0;
}
.navflex a {
text-decoration: none;
text-decoration: none;
font-family: 'Open Sans';
font-size: 25px;
color: #FFFFFF;
display: block;
padding: 5px 25px;
text-align: center;
}
#home_button {
width: 38px;
height: 38px;
}
.tilde {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
font-family: 'Open Sans';
padding: 7px 0px;
}
#media all and (max-width: 800px) {
.navflex {
flex-direction: column;
flex-wrap: wrap;
}
.tilde {
display: none;
}
}
<div id="navigation">
<ul class="navflex">
<li><img src="images/home_button.png" alt="An icon representing a house." id="home_button"></li>
<li>Phantom of the Opera</li>
<li class="tilde">~</li>
<li>The Lion King</li>
<li class="tilde">~</li>
<li>Wicked</li>
<li class="tilde">~</li>
<li>Bookings</li>
<li class="tilde">~</li>
<li><a href='#'>Location</a></li>
</ul>
</div>