Samuel Ohrenberg Samuel Ohrenberg - 3 months ago 7
CSS Question

CSS/HTML Header Background Color Not Covering Entire Width of Page

Image with visual aid for what I am trying to do

Hello,

I am working on designing a web page, and I am trying to get my background color to cover the entire header area. However, it keeps having an area around it that is the main page's background. I have tried adding borders and messing with the padding, but all that does is decrease the of the information inside of the header.

Is there a way to get the background color for the header to reach the top of the page and all the way out to both sides of the page?

My CSS:

/* our body class */

body
{
background-color: #0077BE;
}

header
{
width: 100%;
background-color: #1C39BB;
color: white;
}


My HTML

<body>
<header>
<h1>Welcome to Samuel Ohrenberg's portfolio!</h1>
<center>
<ul class='navList'>
<li class='navButton' a href='index.html'>Home</text>
<li>
<div class="dropdown">
<button class="dropbtn">&#8659; Portfolio Items &#8659;</button>
<div class="dropdown-content">
<a href="programPage.html">Programs</a>
<a href="otherProjects.html">Other Projects</a>
</div>
</div>
<li class='navButton' a href='videoInterview.html'>Video Interviews</text>
</ul>
</center>
</header>
</body>



Answer

You are challenging the default margin of body. Just remove the default margin from body:

body
{
    background-color: #0077BE;
    margin:0;
}

header
{
    width: 100%;
    background-color: #1C39BB;
    color: white;
}
<body>
    <header>
        <h1>Welcome to Samuel Ohrenberg's portfolio!</h1>
        <center>
            <ul class='navList'>
                <li class='navButton' a href='index.html'>Home</text>
                <li> 
                    <div class="dropdown">
                    <button class="dropbtn">&#8659; Portfolio Items &#8659;</button>
                        <div class="dropdown-content">
                            <a href="programPage.html">Programs</a>
                            <a href="otherProjects.html">Other Projects</a>
                        </div>
                    </div>
                <li class='navButton' a href='videoInterview.html'>Video Interviews</text>
            </ul>
        </center>
    </header>
</body>