CSS border color

Question

How do I make the border of my header have the same color as my header? When I ran my code, the border of the header has the HTML background color. How do I make it so that the background color of the header fills the edge of the page?

header {
  background-color: #3AAFA9;
}

<header>
  <h1 id="home">Hi</h1>
  <nav>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
  </nav>
</header>

@AndyRay I think that is a poor example for a duplicate. YOur duplicate is soley caused by a typo ( using `#body` instead of `body` as selector). — tacoshy, May 16 '22 at 03:27
The `white-space` is caused by the default body margin. You can remove it by using: `body { margin: 0; }` — tacoshy, May 16 '22 at 03:28

Nick Vu · Answer 1 · 2022-05-16T04:07:01.270

You can reset the margin of all elements which are applied differently in different browsers. If you're still wondering why we need it, you can check this article.

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

* {
   margin: 0; /*Reset margin*/
}

header {
  background-color: #3AAFA9;
}

<header>
  <h1 id="home">Hi</h1>
  <nav>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
  </nav>
</header>

CSS border color

1 Answers1