Header is sticking to the left side of the page

HTML-CSS
1

I am currently working on the third project for Responsive Web Design Certification on freecodecamp.org, its a landing page. I just cannot figure out why this header is not fillingup the entire horizontal screen. Can you please help me?

Code Camp Forum
Code Camp Forum933×542 82.3 KB

Following is the CSS for header;

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

img {
  width: 150px;
  color: white;
  
}
#header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
}

nav > ul {
  display: flex;
  flex-direction: row;
}
2

Hello there!
The header is currently with no width value, so its only as wide as the content inside… If you want it to span all the width of the page you should set the width of the header yourself (I would recomend use either % or vw and not px or em/rem) using the width css property.
Also, as a side note, in the css that you just provided, the header is targeted twice: as header and as #header.
Hope that helps!

3

Thanks for pointing out the mistake. However the sample project on codepen also does not have any width value. Kindly check.

https://codepen.io/freeCodeCamp/pen/RKRbwL

4

I just used width: 100%; and it worked. Thank you so much.