How can I remove right margin for a section element?

Question

I'm trying to put a navigation bar with links at the very top of the browser screen. This bar will stretch all the way to the top, left, and right, with zero margins outside of it. I have already set the width to "width: 100%" in the CSS for this container. I have set margin-left, margin-top, and margin-right all at -8px because it appears putting a negative pixelation in is the only way to get those margins to go all the way to the edge.

For some reason, no matter what CSS properties I set, I cannot get that right margin to go all the way to the edge. Any ideas as to what I can try to get this stubborn margin to disappear? Just for kicks, I even set the right margin to negative 500px just to see. It had no effect on it. My right margin seems to be totally inaccessible. I would say that right now there is about a 5px margin on the right side that will not go away.

Please help.

.publicnavbarwrap {
  width: 100%;
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
  background-color: #CCC;
  box-shadow: 5px 5px 5px;
  #FFF;
}

body {
  font-family: Quicksand, verdana;
  background-color: #000000;
  box-sizing: border-box;
  background-image: url(../images/background.jpg);
  background-size: cover;
}

<section class="publicnavbarwrap">
  <div id="public_nav_bar">
    Nav content
  </div>
</section>

FYI, Chrome and Edge use the same rendering engine. If your site is valid it will work in both. — isherwood, Nov 17 '22 at 22:01

score 1 · Answer 1 · answered Nov 17 '22 at 22:02

1

Remove the negative margins from .publicnavbarwrap and add this to the body:

body {
  margin: 0;
}

Some browsers have a default margin for the body inside the user agent stylesheet

answered Nov 17 '22 at 22:02

18jad

413
3
8

Thanks, @18jad. This worked. I thought I had tried that because it had crossed my mind at one point but apparently I didn't. – Nov 17 '22 at 23:01

How can I remove right margin for a section element?

1 Answers1