Looking to create a fixed-header that includes clickable links on the left and our logo on the right.
Encountering an issue when trying to make the header take up the full width of the screen in its fixed position. The header's width seems to shrink to fit the size of the three links added.
The header width is set to 100% already, but I am unable to identify the underlying problem.
html {
scroll-behavior: smooth;
}
.clear {
clear: both;
}
header {
width 100%;
height: 100px;
position: fixed;
color: rgb(255, 0, 0);
top: 0;
left: 0;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
z-index: 999;
}
footer {
height: 30px;
color: black;
text-align: center;
box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
}
header ul {
list-style: none;
float: left;
text-transform: uppercase;
font-family: 'Source Sans Pro';
font-weight: bold;
}
header ul li {
float: left;
margin-left: 60px;
line-height: 100px;
}
header ul a {
text-decoration: none;
}
header ul a:hover {
color: rgb(200, 0, 0);
}
.thumb-container {
max-width: calc(960px + 40px);
margin: 110px auto 0 auto;
}
thumb-container a {
width: calc(960px / 3);
height: calc(960px / 3);
background: aqua;
float: left;
margin: 0 5px 10px 5px;
}
@media screen and (max-width: 1000px) {
.thumb-container {
max-width: 660px;
/* Align in center */
background: black;
}
}
@media screen and (max-width: 660px) {
.thumb-container {
max-width: 100%;
/* Align in center */
background: black;
}
.thumb-container a {
width: 100%;
/* Make containers full width */
margin: 0 0 10px 0;
}
}<header>
<nav>
<ul>
<li> <a href="index.html"> Home </a></li>
<li> <a href="#"> Supplies </a></li>
<li> <a href="#"> About us </a></li>
</ul>
</nav>
<img src="img/" alt="lol">
</header>
<main>
<div class="thumb-container">
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
<div class="clear"></div>
</div>
</main>
<footer> Test footer text</footer>