HTML+CSS - Top navbar won't go width 100% accross screen

Question

My navbar won't go fully across the screen. There are white bars on the top, left- and right sides. I need to remove those margins and make my navbar to occupy the whole space.

My code:

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
  }
  
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
}
  
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
  
/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/index.css">
</header>
<body>
    <!--TOPNAV-->
    <div class="topnav">
        <a class="active" href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
</div>
</body>
</html>

Gives this as output:

I want to remove the white bar on the top, bottom and sides

score 4 · Accepted Answer · answered Oct 26 '20 at 08:06

4

body margin is always 8px, so you need to reset the body style.

body {
  margin: 0;
}

answered Oct 26 '20 at 08:06

wangdev87

8,611
3
8
31

This worked! I will accept the answer in 10 minutes because of the cooldown. Thanks! – MdeGraaff Oct 26 '20 at 08:07
the body margin isn't _always_ 8px, it's just the user agent style for the body tag - there's nothing saying it can't be 293px :) – corn on the cob Oct 26 '20 at 08:28
what i meant is 8px is the default value. – wangdev87 Oct 26 '20 at 08:30
yes, most of the time, yes – corn on the cob Oct 26 '20 at 09:20

score 0 · Answer 2 · edited Oct 26 '20 at 11:52

Go to this link: https://meyerweb.com/eric/tools/css/reset/reset.css, copy the file and open a new css file (name it reset.css or however you like it) within your project then paste it. It should help you remove those spaces.

Also do not forget to add the link to your HTML file. HTML elements have their default margin values and may have results like this, so you will have to reset those default values as well.

score 0 · Answer 3 · answered Oct 26 '20 at 08:48

0

You can either user reset.css suggested by @dogankar above. Or you can remove all default margin and padding by this snippet.

*, *::after, *::before {
    padding: 0;
    margin: 0;
}

answered Oct 26 '20 at 08:48

Khondoker Zahidul Hossain

447
5
9

HTML+CSS - Top navbar won't go width 100% accross screen

3 Answers3