I'm currently working on a school project to develop a website. The challenge I'm facing is customizing the navbar and header background colors in such a way that they extend seamlessly to the end of the page. Despite my efforts, there seems to be an issue where the headers' background colors (white and gray) don't reach the edge, leaving a visible blue background. I have included a screenshot to illustrate this problem along with my code:
<body>
<div class="Headers">
<h1 style="margin-bottom:0px;">
COMPUTER GAMES REVIEW BY ASAF DAMTI
</h1>
<h2 id="secondheader">
Welcome to my site
</h2>
</div>
<div class="Menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Details</a>
</li>
<li>
<a href="#">On Me</a>
</li>
<li>
<div class="dropdown">
<button class="dropbtn">Links</button>
<div class="dropdown-content">
<a href="https://store.steampowered.com/app/730/CounterStrike_Global_Offensive/" target="_blank">Csgo</a>
<a href="https://www.roblox.com/home" target="_blank">Roblox</a>
<a href="https://www.minecraft.net/en-us" target="_blank">Minecraft</a>
<a href="https://playvalorant.com/en-us/" target="_blank">Valorant</a>
</div>
</div>
</li>
<li>
<a href="#">Contact me</a>
</li>
</ul>
</div>
</body>
</html>
The HTML portion appears as follows while the corresponding CSS is detailed below:
body {
background-color: darkcyan;
font-family: Calibri;
}
.Headers{
background-color:white;
}
#secondheader{
margin-top:0px;
margin-bottom:1px;
opacity:50%;
}
.Menu{
background-color:gray;
}
.Menu a{
background-color:gray;
font-size:20px;
padding:4px;
padding-right:15px;
text-decoration:none;
color:black;
}
.Menu a:visited{
color:black;
}
.Menu a:hover{
background-color:white;
}
.Menu ul{
margin-top:0px;
padding-left:0px;
}
.Menu li{
display:inline;
padding:5px;
}
.dropbtn {
background-color: gray;
border: none;
font-size: 20px;
padding: 5px;
padding-right: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:white;
min-width:160px;
z-index:-1;
}
.dropdown-content a{
color: black;
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: white;
}
To visualize the issue more clearly, you can refer to this picture of the website.