Unable to align my header when I adjust the positon

[katehocking090280461]

Hi there,

I am a super beginner running through a practice project on my own VS. Currently I am attempting a simple header that accomplishes 2 things:

1. aligns to the center of the page (text-align: center)
2. stays at the top of the page when scrolling (position: fixed)

The text-align property works as expected, but when I also include the position: fixed, it shoves my header back to the left side of the page. I am sure there is a very easy and obvious explanation for this, but I must have missed something in the lesson. Can anyone help? Thank you in advance!

Here is the HTML section:

< header>
    <h1>Style Guide</h1>
< /header>

and the CSS:
h1 {
text-align: center;
position: fixed;
top: 0px
}

[kirativewd]

Hi there,

When you set the header to fixed, it removes it from the flow of the document. When this happens it shrinks down to fit the size of the content (if there is any). This problem can simply be fixed by adding width to the header.

header {
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
}

% width depends on width of the device–use different % for different sizes

[katehocking090280461]

This helped so much thank you for the help! I did this coupled with z-index on both sections and it worked!