How to make color background full-CodePudding

How do I make the background color touch each end. I am fairly new to html and CSS below I have the code that I input for the background. Please let me know exactly what I need to change in my code. I know some of it needs to be changed I just don't know exactly what I need to change.

.black {
  background-color: black;
  font-size: 20px;
}

<div >
  <hr>
  <h2 >Documentation Examples</h2>

  <a>
    <ul >
      <li>
        Savings or Checkings Accounts
      </li>
      <li>
        Stocks, Dividends, Bonds or Debentures
      </li>
      <li>
        Life Insurance Accounts
      </li>
      <li>
        Escrow Accounts
      </li>
      <li>
        Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
      </li>
      <li>
        Safe Deposit Box Contents
      </li>
      <li>
        Business Accounts
      </li>
      <li>
        Corporation/Business Entity/Partnership
      </li>
      <li>
        Governmental Agency Accounts
      </li>
      <li>
        Miscellaneous Accounts
      </li>
    </ul>
    </nav>
  </a>
  <br>
  <br>
  <br>

</div>

enter image description here

CodePudding user response：

Nest your code in a body and use margin: 0; in your stylesheet. See below.

.black {
  background-color: black;
  font-size: 20px;
}

body {
  margin: 0;
}

li {
  color: white;
}

<body>
<div >
  <hr>
  <h2 >Documentation Examples</h2>

  <a>
    <ul >
      <li>
        Savings or Checkings Accounts
      </li>
      <li>
        Stocks, Dividends, Bonds or Debentures
      </li>
      <li>
        Life Insurance Accounts
      </li>
      <li>
        Escrow Accounts
      </li>
      <li>
        Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
      </li>
      <li>
        Safe Deposit Box Contents
      </li>
      <li>
        Business Accounts
      </li>
      <li>
        Corporation/Business Entity/Partnership
      </li>
      <li>
        Governmental Agency Accounts
      </li>
      <li>
        Miscellaneous Accounts
      </li>
    </ul>
    </nav>
  </a>
  <br>
  <br>
  <br>

</div>
</body>

CodePudding user response：

.black {
  background-color: black;
  font-size: 20px;
  color: white; 
  height: 100vh;
}

body {
  margin: 0;
  padding: 0;
}

CodePudding user response：

Your code is correct, but you need to wrap the css in <style type="text/css">...</style> tags.

This should be in the <head>...</head> tag on your page:

<head>
    <!-- title and other things go here -->
    <style type="text/css">
        .black {
            background-color: black;
            font-size: 20px;
        }
    </style>
</head>

CodePudding user response：

You should remove all the paddings and margins by adding margin:0 and padding:0. Like this:

body {
  padding: 0;
  margin: 0;
}

This would remove all the paddings and margin so the background will be fully covered.