Position:fixed question

[lucretat]

Hello,

I’m working on the Landing page project and I don’t understand why the header element does not take up the whole width of the screen. By trial and error I now know the positon:fixed is causing this (if removed, it is OK).

Can you help me understand please? Thanks a lot!

CodePen: https://codepen.io/Dr-O-Dr/pen/yLzqxzL

[HawksSpawn]

Hi @lucretat and welcome to the forum!!!
With the position property set to fixed, to take up the whole width of the screen you need to set width property to 100%.

.class {
  position: fixed;
  top: 0;
  width: 100%;
}

I link, in my opinion, the complete answer about your question.

Why does fixed positioning alter the width of an element?

[lucretat]

Thanks, I figured that 100% width as well and read the answer. However, still not completely clear on the topic… The fixed element (if width is not specified) should take up the width of the viewport, right? The viewport is the whole screen size, is it not? So I should see the header having the width of the window, correct? However, I see this instead:

[lucretat]

I also use the dev tools on the original project page (the assignment) and there is no width:100% in the CSS:

Sorry if my questions are lame and thanks for your time!

[HawksSpawn]

Hi @lucretat,
I really don’t know why, I don’t have this problem as you can see in the image.

Your browser zoom is set to 100%?

[lucretat]

I was adjusting in to width 100% after, so maybe you’re seeing that? My browser zoom is OK, everything else is looking right.

Don’t worry about it, I will just go with 100% width property

Thanks!