Login/Register
Remove white space from the sides and top of my navbar
Asked Answered
Solved htmlcssnavigationmarginpadding
M

6

5

I have looked around for many solutions and I am currently redoing the code of a website I own as I had all of my CSS individually laid out on each HTML page. Eventually I had too many pages to handle, and I decided to make a stylesheet to clean it all up but my EVERYTHING was a mess. Indentation, comments, etc...

Currently, I am working on my Navigation Bar on the Website, but for some reason which I can't figure out (I've tried many things) the bar is positioned exactly in the middle which leaves a small amount of white space at the top, left and right of the bar. Here is the HTML:

ul { /* unordered list properties */
  list-style-type: none; /*takes out bullet points */
  margin: 0; /* scaling */
  padding: 0; /* scaling */
  overflow: hidden; /* clipping rules: https://www.w3schools.com/cssref/pr_pos_overflow.asp */
  background-color: #0c1f2e; /* colour */
}
li { /* list item properties */
  float: left; /* move item to the left */
  font-size: 14px; /* set the font size to 14 pixels */
}
li a { /* vertical style */
  display: block; /* display style */
  color: #ffffff; /* text colour */
  text-align: center; /* centres the text */
  padding: 19px; /* vertical padding */
  text-decoration: none; /* remove any text effects */
  font-family: 'Dosis', sans-serif; /* change the font to selected font: Dosis */
}
li a:hover { /* vertical style items when hovered upon by cursor properties */
  background-color: #639ddf; /* set the background colour */
  font-size: 20px; /*set the font size to 20 pixels */
}
    <nav> <!-- begin navigation element -->
      <div id="menu"> <!-- create and start new element with the id: menu -->
        <ul> <!-- begin unordered list -->
          <li><a href="index.html">Home</a></li><!-- list items -->
          <li><a href="WebsiteCompetitions.html">Competitions</a></li>
          <li><a href="WebsiteBuilds.html">Builds</a></li>
          <li><a href="WebsiteImages.html">Images</a></li>
          <li><a href="WebsiteVideos.html">Videos</a></li>
          <li><a href="WebsiteComm.html">Fight Club</a></li>
          <li><a href="WebsiteArticles.html">Articles</a></li>
          <li><a href="/mybb">Forums</a></li>
          <li><a href="WebsiteTools.html">Tools</a></li>
          <li><a href="WebsiteNews.html">News</a></li>
          <li><a href="WebsiteOffers.html">Shop</a></li>
          <li><a href="cooperators.html">Allies</a></li>
          <li><a href="WebsiteMore.html">More</a></li>
        </ul> <!-- end the unordered list -->
      </div> <!-- end the 'menu' element -->
    </nav> <!-- end navigation element -->

Thanks all in advance, I hope I have provided enough info and please don't be too harsh with my over-commenting or anything just keep those opinions to yourself. As for my question structure and code, please correct me on anything I've done wrong and point out how I can fix. Thank you very much for taking your time to read this,

Metalepsis answered 29/1, 2018 at 21:54 Comment(0)
M
7

Is this what you're looking for?

Link to JSFiddle

If so, in your CSS. Add this

body {
   margin: 0px;
}
Misogyny answered 29/1, 2018 at 22:0 Comment(0)
A
4

None of the solutions I've were working for me, but I found one that did. In my CSS: 

.navbar{
  margin-left: -15px;
  margin-right: -15px;
}

It seemed like mine had about 15 pixels of margin on just that I couldn't get away by setting the margin to 0.

Anhydrite answered 26/6, 2019 at 12:46 Comment(0)
L
1

It looks like the browser default css style is adding margin: 8px; to the body. To remove it add this to your css:

body {
    margin: 0;
}
Landside answered 29/1, 2018 at 21:58 Comment(2)
It's not the browser, it's Stack Overflow snippet. Most likely, this has to do with padding on <body>. – Unearthly
No it's not. I created a new html page with the code from above on my computer and opened it up in Chrome. I inspected it and the user agent stylesheet was adding margin: 8px; to the body. Most sites include css resets that remove this margin to the body. – Landside
E
0

Setting margin on your nav to 0px and setting body padding to 0px; should works.

Emulsify answered 29/1, 2018 at 22:2 Comment(0)
B
0

Browser adds some default margin so check for that. I set mine to -8px and it worked.

Betteanne answered 29/7 at 15:38 Comment(0)
F
-2

I tried left:0; It worked like a charm!

Fanny answered 12/5, 2021 at 15:59 Comment(1)
This is not exactly the idomatic way deal with margin. – Laccolith

© 2022 - 2024 — McMap. All rights reserved.