What is causing the slight space between the navbar and the edges of my webpage?

tiny opening

Here is the HTML and CSS code snippet:

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>

In the provided code snippet, you may notice that the navbar is supposed to extend beyond the window so there is no gap between it and the edges of the page.

javascripthtmlcssnavbar

Answer №1

To fix the issue of default 8px padding on the body, simply include a margin: 0px CSS property in your body style.

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

.navbar {
  overflow: hidden;
  background-color: #333;
  text-align: center;
  width: 100%;
}
/* Rest of the CSS code remains unchanged */

<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>

Answer №2

Implementing this code at the beginning of your project can save you a lot of time and headaches. Using the universal selector (*) sets all elements to have zero margins and padding.

*{
    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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The `tailwind.min.css` file takes precedence over `tailwind.css` in my Nuxt

Having trouble configuring Tailwind to use a custom font without it overriding the tailwind.css file and not displaying the changes? https://i.stack.imgur.com/ExDCL.png Check out my files below. // tailwind.config.js const defaultTheme = require('ta ...

javascriptcssvue.jsnuxt.jstailwind-css

Gather information from HTML elements that are updated with text dynamically via AJAX calls using Scrapy

My goal is to extract information about mobile phones listed on the 'amazon.in' website from the following link: here using scrapy. Below is the code I am using: from scrapy.spiders import CrawlSpider, Rule from scrapy.linkextractors import Lin ...

pythonhtmlajaxweb-scrapingscrapy

Ways to automatically insert an icon within a textarea

While attempting to insert an image inside a textarea, I discovered that it seems impossible without using the contenteditable ="true" attribute of a textarea. However, upon visiting the diaspora site, I found out that this can indeed be achieved. I am uns ...

cssimagehtmltextarea

Having trouble getting custom select to work with CSS in Firefox?

I want to customize the button (down arrow) located in the right corner of the select box. The HTML code is as follows: <div class="buscaSelect"> <select name="oper"> <option value="value1">Value 1</option> < ...

htmlcssfirefox

Is there a way to showcase English and CJK text vertically with CSS?

This particular issue was first discussed 14 years ago on Stack Overflow, but a definitive solution still remains elusive. My goal is to have both CJK and Latin characters displayed vertically, with their bottoms facing the right side. While writing-mode ...

htmlcsscross-browserlocalecjk

Issue with Angular4 select in dropdown not able to trigger onChange event

I am new to working with Angular 4 and I am currently in the process of building something. In my project, I have multiple components, one of which contains the following HTML code: <div class="row" style="border:1px solid black;"> <br> <d ...

javascriptangular

PHP script designed to monitor the expiration of a license and send a notification to the administrator approximately one month in advance

Looking for php code to keep track of expiration dates for registered workers' licenses. The admin should also receive notifications when a worker's license is about to expire or has already expired, so they can send an email to the worker. Here ...

phphtml

The success function within the Ajax code is malfunctioning

I am currently utilizing express, node.js, and MySQL. The issue I am facing is that the success function inside my Ajax code is not working as expected. Below is the snippet of the Ajax code in question: function GetData_1(){ var state = $("#dpState_1"). ...

javascriptjqueryajaxnode.jsexpress

React JS - Sending props from Dev and Build to App component

Looking to include static assets and props in my App, specifically having image assets set with a base64 string in the build process. Want to ensure these assets are accessible to the App's props before development and build stages, similar to the fun ...

javascriptnode.jsreactjsbuild

Removing leading zero from ng-change value in controller

One example of my input field is shown below: <input id="0900" type="radio" ng-model="formData.appointment_hour" ng-change="change(0900)" name="appointment" value="0900" class="ng-valid ng-dirty"> After inspecting the function in my controller, I n ...

javascriptjqueryangularjszeroangularjs-ng-change

Executing Selenium test cases based on HTML tag is a key aspect of automated testing

I need to run my selenium test scenarios based on the value of an HTML tag, for example: <meta name="survey name" content="ABC Car"> The content represents different event types, with a total of 4 possible event types. ...

htmlseleniumselenium-webdriver

Are specific names set aside for JQuery Selectors?

One time, I made a mistake with my selector: $("#cut") Unfortunately, this was not pulling the object correctly even though I had defined an object with that id in the HTML. After changing the object's id (and updating the selector), everything work ...

javascriptjqueryjquery-selectors

What is the best way to align a span directly below the email input box in this specific design?

I need to position the span element with the ID email-status directly below the email input field, regardless of the viewport size, to alert users when the email is incorrect. MY HTML STRUCTURE: <!DOCTYPE html> <html lang="en"> <head> ...

htmlcssflexbox

The function of the Django 2 model is not being identified within the index.html file

Hello everyone, I'm a newcomer to the world of Django so please go easy on me! I am currently working on creating a blog in Django and I've encountered an issue. I need to map the posts from the home page to the post page. To achieve this, I have ...

pythonhtmldjangomodel

Struggling with converting my menu design into a dropdown menu

Recently completed creating my initial menu with a left navigation bar design. Wondering if it is achievable to implement a dropdown effect on hover without the use of javascript? I have come across several solutions but they do not seem to work for me, po ...

htmlcssmenu

The placement of toolbar buttons in HTML

My current dilemma involves the placement of a logo on the navigation bar of my website. When the logo is present, the text is not centered vertically, but when I remove the logo it centers correctly. * { margin: 0px; padding: 0px; } .logohead { d ...

htmlcssposition

Managing the attention on a switch button

I'm struggling to maintain focus on the toggle button after it's been clicked. Currently, when I press the button, the focus jumps to the top of the page. I can't figure out what I'm doing wrong. Below is the code snippet: HTML <b ...

javascriptjqueryhtmlangularjs

Encountering a "dependency resolution error" while deploying a React application with Parcel on Heroku

I've developed a compact application and I'm in the process of deploying it to Heroku. However, I keep encountering an error stating: '@emotion/is-prop-valid' dependency cannot be resolved. It's worth mentioning that this project d ...

javascriptnpm

Using Javascript's Array.Filter function to adjust the original array

I'm interested in utilizing Javascript's array.filter method to remove specific items from an array because of its elegant and readable syntax. However, I've noticed that instead of modifying the original array, filter simply returns a new a ...

javascriptarraysfilterangularjs

Exploring the possibilities of utilizing JavaScript within TypeScript

My dynamic javascript object holds all the resources (translation strings) for my app. Here's how it is structured: var ResourceManager = (function () { function ResourceManager() { var currentLanguage = $('#activeLanguage').htm ...

javascripttypescript