Mysterious space in flexbox container despite "space-between"

Hi there,

so I am working on this excercise in the front-end-engineer-path:
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox/projects/tea-cozy

I started playing around a little just to fully unterstand how flex-containers / flex-items work. But I stumbled over some strange behaviour… :frowning:

HTML:

The Tea Cozy
  • Mission
  • Featured Tea
  • Locations

CSS:
body {
background-color: black;
color: white;
font-family: Helvetica;
}

header {
display: flex;
margin: 0 10px;
width: 100%;
height: 69px;
background-color: red;
align-items: center;
}

.logo{
width: auto;
border: solid 1px blue;
overflow: none;
}

.logo img{
max-height: 50px
}

.navigation{
display: flex;
margin-left: auto;
list-style: none;
height: 69px;
width: 60%;
border: 2px solid white;
justify-content: space-between;
align-items: center;
}
.navigation li{
display: flex;
border: 1px dotted white;
height: 50px;
width: 100px;
margin-left: 0;
justify-content: center;
align-items: center;
}

Do you guys notice the space left of the

  • -element “Mission”? Where does it come from? This is a flex container with setting “justify-content: space-between”. Not “space-around”… Why is putting whitespace on the left side but not on the white then?

    If I set “space-around” the space left gets even bigger but its always unproportional… :open_mouth:

    Hope anybody can explain! :slight_smile:

    Thank you!

  • Hey @arc9098845005

    We can’t see your HTML code so i’ll be too hard to help, you should edit your post with the HTML code.

    Sorry for the late response, yes I was in a hurry posting the initial question. :smiley:

    This should work, right?

    
    <!DOCTYPE html>
    <html>
    <head>
      <title>The Tea Cozy</title>
      <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
      <body>
        <header>
        <div class="logo">
          <img  src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*1mzlv4k*_ga*MTc0ODc2ODAwMC4xNjUzMzAyODAx*_ga_3LRZM6TM9L*MTY2NDI3ODU1OS42OC4xLjE2NjQyNzg3NTIuNTUuMC4w">
        </div>
          <ul class="navigation">
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
          </ul>
        </header>
      </body>
    </html>
    

    Yep ! Much better.

    You see the green on the left of your <ul class="navigation"> that’s reason of your space.
    By default, browser apply CSS rules, one of them apparently is adding 40px of padding-left to <ul>

    As you can see here:
    brave_PgG65lpYaD

    This is why it is recommended to reset the CSS mainly by adding some declaration to the universal selector: *.

    For me personally resetting my CSS with this is enough:

    * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
    }
    

    I hope this help :slight_smile:

    PS: A nice and short blog article that explains CSS Reset

    1 Like

    Aaah so it was not my fault though. :smiley: Yes I know about the CSS Reset but I had not thought in this direction! Thanks a lot! :slight_smile: