0

Take a look at the image attached to this question.

Red Nav Bar has black on top: Red Nav Bar has black on top

You see how there is black color around the navigation bar at the top of the page. It looks like it is floating?

How do I make it so that it is all red from edge to edge and all the way to the top of the page?

Here is my page code:

body {
  margin: 0;
  background-color: black;
}

h1 {
  color: red;
}
.nav {
  border: 1px solid #ccc;
  border-width: px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: red;
  font-size: 35px;
  float: clear;
}
.nav li {
  display: inline;
}
.nav a {
  display: inline-block;
  padding: 10px;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: blue;
}
li {
  border-right: 1px solid #bbb;
}
.center {
  margin: auto;
  width: 65%;
  background-color: white;
  padding: 10px;
  height: 100%;
}
<ul class="nav">
  <li><a href="/index.php">Home</a></li>
  <li><a href="/videos.php">Videos</a></li>
  <li><a href="/images.php">Images</li>
      <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>
simmer
  • 2,639
  • 1
  • 18
  • 22
DogDogJimmyL
  • 3
  • 2

1 Answers1

0

3 solutions below...

You can choose margin zero for all by the css below.

*{ margin: 0} //this is for all margins.

OR

body { margin:0} //this is for only body margin

OR

select "Position: absolute" for the nav element with top, left, right zero

.nav{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
huzzzus
  • 172
  • 10
  • 1
    why make it so complicated with side efefcts if the issue is way more simple? its just a default body margin that can be removed by setting it to 0. just 1 line of code. – tacoshy Dec 02 '20 at 01:50
  • yes you are right. that's another option I have added both. – huzzzus Dec 02 '20 at 01:51
  • 1
    ok just use body instead of all. All also has side effects that it removes default margins you might actually want to have. – tacoshy Dec 02 '20 at 01:52