Issues with CSS-Flexbox. (Build a Landing Product Page)

[gabrielalejandrojara]

Hi, I’m doing the “Build a Landing Product Page” project and I ran into a problem using the “justify-content: space-between” property.

Why the first element “¿Quienes somos?” is not in the box’s left side but the last element “¡Visitanos!” is in the box’s right side?. How can I solve that?

Code: https://codepen.io/Gabi278/pen/MWJbZXq

[Sylvant]

wow took me a while but i found the culprit.
As it happens html has some default properties set for certain elements, such as ul. In this case what caused the additional space is padding-inline-start, which is set by default to 40px. Add padding-inline-start: 0; in your ul selector and this will get rid of it.
Its common practice to use code similar to this one:

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

It makes sure to get rid of most if not all default values, but you have to be ready to add your own

this is the more advanced approach:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  margin:0; padding:0;
}

[gabrielalejandrojara]

Thank you for your help!! It works . Sorry for responding late, I was very busy.