How do I make my HTML background colour reach the sides of the page?

Question

I'm trying to create a navigation bar (made up of two horizontal lists) that has a black background. The problem is that the background color doesn't reach the outer border of the page even when I set the width and height of my ul element to 100% and margin and padding to 0px.

I also tried making the body and HTML's margin and padding 0px but that also failed. I was able to get a result close to what I was looking for by making the HTML background color black but that gave the webpage a black border as well. Thank you if you're able to help me. My code is below.

body {
  font-family: helvetica;
  background-color: gray;
}
#nav {
  display: flex;
}
img{
  width: 100px;
  height: 100px;
}
#left{
color: black;
font-size: 24px;
}
#left li{
  padding: 10px;
  padding-top: 14px;
  padding-bottom: 6px;
  float: left;
  display: block;
}
#left_list{
  width: 70%;
  clear: right;
}
#right{
  color: black;
  font-size: 24px;
}
#right li{
  padding: 22px;
  padding-bottom: 26px;
  padding-top: 16px;
  float: right;
  display: block;
}
#right_list{
  width: 30%;
  float: right;
  clear: left;
}
ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: black;
  width: 100%;
  height: 100%;
  }
#nav a:link{
  color: white;
  display: block;
  margin-top: 25px;
}
#nav a:hover{
  color: hotpink;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
<div id="nav">
  <div id="left_list">
    <div id="left">
      <ul>
        <li><img src=""></li>
        <li><a style="color: green" href="/index.html">Home</a></li>
        <li><a style="color:white" href="/contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
  <div id="right_list">
    <div id="right">
      <ul>
        <li><a style="color:white" href="" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li><a style="color:white"  href="" target="_blank"><i class="fa fa-instagram"></i></a></li>
        <li><a style="color:white" href="" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
      </ul>
    </div>
  </div>
</div>

Using the inspector, I can see that the `` has 8px margin, which would inset it from the root html element. Setting `margin: 0;` in your CSS for _body_ got rid of it. — Stephen P, Dec 22 '20 at 18:50

score 0 · Answer 1 · answered Dec 22 '20 at 18:50

I also tried making the body and HTML's margin and padding 0px but that also failed

Seems not when I just add

* { margin:0; padding:0; }

* { margin:0; padding:0; }
body {
  font-family: helvetica;
  background-color: gray;
}
#nav {
  display: flex;
}
img{
  width: 100px;
  height: 100px;
}
#left{
color: black;
font-size: 24px;
}
#left li{
  padding: 10px;
  padding-top: 14px;
  padding-bottom: 6px;
  float: left;
  display: block;
}
#left_list{
  width: 70%;
  clear: right;
}
#right{
  color: black;
  font-size: 24px;
}
#right li{
  padding: 22px;
  padding-bottom: 26px;
  padding-top: 16px;
  float: right;
  display: block;
}
#right_list{
  width: 30%;
  float: right;
  clear: left;
}
ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: black;
  width: 100%;
  height: 100%;
  }
#nav a:link{
  color: white;
  display: block;
  margin-top: 25px;
}
#nav a:hover{
  color: hotpink;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
<div id="nav">
  <div id="left_list">
    <div id="left">
      <ul>
        <li><img src=""></li>
        <li><a style="color: green" href="/index.html">Home</a></li>
        <li><a style="color:white" href="/contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
  <div id="right_list">
    <div id="right">
      <ul>
        <li><a style="color:white" href="" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li><a style="color:white"  href="" target="_blank"><i class="fa fa-instagram"></i></a></li>
        <li><a style="color:white" href="" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
      </ul>
    </div>
  </div>
</div>

score 0 · Accepted Answer · answered Dec 22 '20 at 18:57

if you put margin: 0 for body your problem will solved

body {
  font-family: helvetica;
  background-color: gray;
  margin: 0;
}
#nav {
  display: flex;
}
img{
  width: 100px;
  height: 100px;
}
#left{
color: black;
font-size: 24px;
}
#left li{
  padding: 10px;
  padding-top: 14px;
  padding-bottom: 6px;
  float: left;
  display: block;
}
#left_list{
  width: 70%;
  clear: right;
}
#right{
  color: black;
  font-size: 24px;
}
#right li{
  padding: 22px;
  padding-bottom: 26px;
  padding-top: 16px;
  float: right;
  display: block;
}
#right_list{
  width: 30%;
  float: right;
  clear: left;
}
ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: black;
  width: 100%;
  height: 100%;
  }
#nav a:link{
  color: white;
  display: block;
  margin-top: 25px;
}
#nav a:hover{
  color: hotpink;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
<div id="nav">
  <div id="left_list">
    <div id="left">
      <ul>
        <li><img src=""></li>
        <li><a style="color: green" href="/index.html">Home</a></li>
        <li><a style="color:white" href="/contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
  <div id="right_list">
    <div id="right">
      <ul>
        <li><a style="color:white" href="" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <li><a style="color:white"  href="" target="_blank"><i class="fa fa-instagram"></i></a></li>
        <li><a style="color:white" href="" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
      </ul>
    </div>
  </div>
</div>

How do I make my HTML background colour reach the sides of the page?

2 Answers2