Mysterious space in flexbox container despite "space-between"

Hi there,

so I am working on this excercise in the front-end-engineer-path:

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


The Tea Cozy
  • Mission
  • Featured Tea
  • Locations

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;

width: auto;
border: solid 1px blue;
overflow: none;

.logo img{
max-height: 50px

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>
      <title>The Tea Cozy</title>
      <link rel="stylesheet" href="style.css" type="text/css" />
        <div class="logo">
          <img  src="*1mzlv4k*_ga*MTc0ODc2ODAwMC4xNjUzMzAyODAx*_ga_3LRZM6TM9L*MTY2NDI3ODU1OS42OC4xLjE2NjQyNzg3NTIuNTUuMC4w">
          <ul class="navigation">
            <li>Featured Tea</li>

    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:

    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: