My webpage has a header at the top and here is the HTML code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<css link here>
</head>
<body onload="prettyPrint()">
<div class="header">
</div>
</body>
</html>
Here is the CSS:
body
{
background-color: rgb(200, 200, 200);
z-index: 0;
margin-top: 50px;
}
.header
{
width: 100%;
background-color: rgb(8, 36, 86);
color: white;
height: 2em;
padding: .5em;
z-index: 1000;
top: 0px;
position: fixed;
font-family: times, serif;
display: inline-block;
}
However, when I run this code, the header does not extend across the page correctly as expected in both Chrome and Firefox:
I tried setting the width of the header to 1000% and adding a left margin of -9999px in the CSS, but it seems like a workaround. Is there a better solution to make the header extend across the page without any issues?