CSS/HTML Header 背景颜色未覆盖整个页面宽度

Question

Image with visual aid for what I am trying to do

你好，

我正在设计一个网页，我正在尝试让我的背景颜色覆盖整个 header 区域。但是，它始终有一个区域作为主页的背景。我尝试添加边框并弄乱填充，但所做的只是减少 header.

中的信息

有没有办法让 header 的背景颜色到达页面顶部并一直延伸到页面两边？

/* our body class */

body {
  background-color: #0077BE;
}
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>

Answer 1

您正在挑战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>

Answer 2

如前所述，您需要设置元素的边距。默认情况下我这样做（重置所有元素的边距和填充）：

* {
  margin: 0;
  padding: 0;
}

在您的示例中，它将如下所示： http://codepen.io/alebon/pen/gwaoNO

CSS/HTML Header 背景颜色未覆盖整个页面宽度

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

html

css

background

header

background-color