UL/LI CSS menu not aligning properly - html

Question

I am having issues getting my menu to align properly. The images are all spaced far away from each other even when they should be closer. I am new to using Ul and Li and am not sure how to fix this. Ideally I would have the images across the whole screen with no space on the right or left and just a thin space between each image, but instead, there is a large space. I am unsure if this is something in the Ul Li tags or if there is something I can do with margin.
Could someone please advise me. I am including a jsfiddle to show what it currently looks like. https://jsfiddle.net/f1bctqzn/ is what I am currently getting. How do I these lines to touch their respective sides of the screen and still have a small space between the rest.
<li class="header"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kale-grain-bowls"></li>
<li class="header"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kids-real-meals"></li>

Answer 1

Add padding: 0 to your ul and margin: 1px (or something) to li
Also, add width: 100% to img

Answer 2

See this fiddle
To add space betwwen the li items, don't add the margin property to the ul, but add a margin to the li items (I used the 2px you had set for the ul). To add a margin only between the li items, I used
li.header{
margin-left:2px;
}
li.header:first-child{
margin-left: 0;
}

Answer 3

Adjusted the margins and used a flexbox to adjust the images across the whole screen.
Check it out and let me know your feedback. Thanks!
body {
margin: 0;
padding: 0;
}
ul.toplist {
list-style: none;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li.header {
display: inline-block;
height: 100%;
margin-right: 1px;
}
img.kale-grain-bowls,
img.salads,
img.burgers-sandwiches,
img.sides,
img.smoothies-milkshakes,
img.kids-real-meals {
max-width: 100%;
max-height: 100px;
}
<ul class="toplist">
<li class="header">
<a href="/menu/kale-grain-bowls">
<img src="https://i.imgur.com/T4ZAaK3.png" class="kale-grain-bowls">
</a>
</li>
<li class="header">
<a href="/menu/salads">
<img src="https://i.imgur.com/T4ZAaK3.png" class="salads">
</a>
</li>
<li class="header">
<a href="/menu/burgers-sandwiches">
<img src="https://i.imgur.com/T4ZAaK3.png" class="burgers-sandwiches">
</a>
</li>
<li class="header">
<a href="/menu/sides">
<img src="https://i.imgur.com/T4ZAaK3.png" class="sides">
</a>
</li>
<li class="header">
<a href="/menu/smoothies-shakes">
<img src="https://i.imgur.com/T4ZAaK3.png" class="smoothies-milkshakes">
</a>
</li>
<li class="header">
<a href="/menu/kids-real-meals">
<img src="https://i.imgur.com/T4ZAaK3.png" class="kids-real-meals">
</a>
</li>
</ul>