Changing the header to fixed ruined everything

[argoskier]

Once I realized that the header needed to be fixed on this challenge, it totally broke everything. I thought I started to solve this by setting the header width to 100%, but since it’s a flex box I think I’m not supposed to do that?

If I take out the fixed property, everything is nice again, but once fixed it throws off the header, and I cannot for the life of me figure out how to center it all again. No idea what is going on…

Here is my pen if anyone thinks they can help…

https://codepen.io/OddlyAnonymous/pen/mdOoWKo

all comments welcome, thanks!

[Ma3_str0]

Try this:

header{
  width:100%;
  position:fixed;
 height:20%;
  
  background: url(https://i1.wp.com/stoweforager.com/wp-content/uploads/2018/10/chaga-3.jpg?resize=1024%2C683&ssl=1);
    background-size: cover;
  display: flex;
  padding: 2rem;
  justify-content: space-around;
  align-items: center;
}

Hope it helps!

[argoskier]

Thank you for the reply. So you set the width to 100%. This does sort of solve the problem. I did this initially as well as you can tell if you read my entire first post.

So after I did that the first time, I realized that the grey container underneath the header is not filling the whole space (you can see a tiny white border around it). Also you can see that the header is not evenly distributed as the right side is going to the edge of screen, but the left side also has that tiny bit of white space.

The next thing I did going down this rabbit hole was to set that next grey container to 100% witdth, however that really broke all the alignment of the flexbox, making all the text jump to the right of screen for some unknown reason.

Which is what led me to believe there is a better solution then setting width to 100%, but I just have no idea…

EDIT: I just realized some code that helped me out with those stubborn edges I couldn’t get rid of

* {
  margin: 0;
  padding: 0;}