Adding
position:fixed
takes the element out of the document flow. It will no longer stretch to the full width of the parent element. Assuming you want the text centred horizontally, you need to add
width:100%
to the style.
.heading {
position: fixed;
text-align: center;
width: 100%;
}
NB: Any following content will be displayed underneath the fixed element. You may want to try
position:sticky
instead.
.heading {
position: sticky;
top: 0;
text-align: center;
}
position - CSS: Cascading Style Sheets | MDN[
^]