Can't get flex box items to align properly (Tea Cozy Project)

Hello, I am trying to do the tea cozy project and I am having trouble with positioning the elements in my nav bar. I set the nav bar to flex and then used space between to get the logo on the left and an ul on the right.

Then I turned the ul into an inline flex container so I could put space between each link. However, as you can see below I set justify-content to space-between but for some reason the first li doesn’t go all the way to the far left of the container. Also the border on the left is completely cut off for some reason…



  • {
    font-family: helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;

.nav {
width: 100%;
height: 69px;
border-bottom: 1px solid seashell;
display: inline-flex;
justify-content: space-between;
position: fixed;

#logo {
height: 50px;
margin: 10px;

ul {
display: inline-flex;
flex: 1;
max-width: 30%;
justify-content: space-between;
list-style: none;
text-decoration: underline;
border: 1px solid red;


ul li{
padding: 0;
margin: 0;

I put a red border around the ul just for troubleshooting. This is the output:

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.