Why is the border reaching to the end of the screen on the right but not on the left? (navigation bar)

(((((EDIT* I MIGHT have figured out what is causing this.

is it because I set my list style to none and now the invisible bullet point is pushing my text over? If so, how would you fix that? )))))))

SECOND EDIT* (((((so I did fix the problem but I doubt I did it correctly… I ended up putting a margin left of -40 on the first list item and it seemed to drag everything over to where it needs to be. I’m sure there is a better way of fixing this… or did I do it correctly?

So I just wrote some code to show you what is going on and I can’t seem to fix it.

I’m using flex and justify content “space-inbetween” to try and push everything out

I thought it was a margin or padding issue, but the background color of teal DOES go to the end of the screen. I can’t figure this out

If you copy and paste this code you’ll notice I made a generic navigation bar at the top of the screen. Now I wanted each item to have it’s own little border and it worked, however the first “home” on the left hand side and the border surrounding it do not go to the edge of the page. However they DO on the right side? What is causing this and how would I fix it? I’m very confused

   **Your code so far**
/* file: index.html */
<style>
.nav-links {
background: #7DE7E2;
width: 100%;
list-style: none;
}

.flex {
 display: flex;
 justify-content: space-between;
}

li {
 border: solid;
 flex-grow: 1;
}

</style>



<nav>

<ul class="nav-links flex">

  <li> <a href="#">Home</a></li>
  <li> <a href="#contacts">contacts</a></li>
  <li> <a href="#">Home</a></li>
  <li> <a href="#">Home</a></li>
  <li> <a href="#">Home</a></li>


 </ul>



 ascsac
<br>

scsc
<br>

wdwd
<br>
wqdqwd
<br>
dwqd
<br>
ddwqd<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br><br><br><br><br>
dwdwq
<br><br><br><br><br><br><br>
dqwdqwdqwd
<br><br><br><br><br><br><br>
dqwd<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
dqwdqwdwqd
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
wdqwdqwd
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<p id="contacts">dsdcsd</p>

 </nav>
/* file: styles.css */

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.66 Safari/537.36 Edg/103.0.1264.44

Challenge: Build a Product Landing Page

Link to the challenge:

I am messing with somewhat similar problems today. Can’t help you right now, but I feel your confusion :upside_down_face:

Yeah, like I don’t understand why the background color reaches where I want it to, but the text starts an inch away? Makes no sense