Why is there a little gap between my navbar and both sides of my page?

Question

this is my html and css:

body {
  background-color: green;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  text-align: center;
  width: 100%;
}

.navbar a {
  float: left;
  font-size: 18px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 18px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navefix:hover, .dropdown:hover, .dropbtn {
  background-color: red;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<body>
  <div class="navbar">
      <a></a>
      <div class="dropdown">
        <button class="dropbtn" onclick="location.href='index.html'">Index 
        </button>
        <div class="dropdown-content">
          <a href="page1.html">page1</a>
          <a href="page2.html">page2</a>
          <a href="page3.html">page3</a>
        </div>
      </div> 
      <a href="page4.html" class="navefix">page4</a>
    </div>
</body>

See you can see it in the code snipped, the navbar should stretch outside the window so there is no green space between the navbar and the page sides.

thank you so much.. it was so easy and I couldn't find it... it actually worked I feel so stupid right now — philip, Aug 24 '19 at 14:54
Spend some time learning to use your browser's developer tools (usually accessed with F12). This will allow you to physically find styling issues easily. — Lee Taylor, Aug 24 '19 at 14:56
Since by default now there is a margin in the body tag is defined So to overcoome that you need to define margin:0 — Krishna Devashish, Aug 25 '19 at 12:29

score 3 · Accepted Answer · answered Aug 24 '19 at 14:54

Just add a margin: 0px CSS property to your body. There is a default 8px padding on the body which is causing the issue.

body {
  background-color: green;
  margin: 0px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  text-align: center;
  width: 100%;
}

.navbar a {
  float: left;
  font-size: 18px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 18px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navefix:hover, .dropdown:hover, .dropbtn {
  background-color: red;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<body>
  <div class="navbar">
      <a></a>
      <div class="dropdown">
        <button class="dropbtn" onclick="location.href='index.html'">Index 
        </button>
        <div class="dropdown-content">
          <a href="page1.html">page1</a>
          <a href="page2.html">page2</a>
          <a href="page3.html">page3</a>
        </div>
      </div> 
      <a href="page4.html" class="navefix">page4</a>
    </div>
</body>

score 1 · Answer 2 · edited Sep 06 '19 at 04:58

Always try using this in starting of ur project will help u save a lot of headache and time. Here * means all elements (a universal selector) so we are setting all elements to have zero(0) margins and 0 paddings.

*{
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  background-color: green;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  text-align: center;
  width: 100%;
}

.navbar a {
  float: left;
  font-size: 18px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 18px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navefix:hover, .dropdown:hover, .dropbtn {
  background-color: red;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<body>
  <div class="navbar">
      <a></a>
      <div class="dropdown">
        <button class="dropbtn" onclick="location.href='index.html'">Index 
        </button>
        <div class="dropdown-content">
          <a href="page1.html">page1</a>
          <a href="page2.html">page2</a>
          <a href="page3.html">page3</a>
        </div>
      </div> 
      <a href="page4.html" class="navefix">page4</a>
    </div>
</body>

Why is there a little gap between my navbar and both sides of my page?

2 Answers2