CODEWITHSUNDEEP
htmlcsshidewhitespaceremoving-whitespace
C2P1
C2P1

Reputation: 437

White space on either side of navbar html

I'm very new to writing html and am trying to create a navigation bar for the first time. The issue I'm having is that there is (a varying degree) of white space either side of the bar. I've made a quick mock up and screen shot to show what I mean: Image

I've spent a lot of time over the last couple hours going through questions that are similar and sometimes identical, but none of the solutions I've tried have worked.

My code is as follows:

#navbar {
  margin: 0px;
  padding: 0px;
  width: auto;
}
#navbar ul {
  background-color: #FAFAD2;
}
#navbar li {
  float: left;
  width: 20%;
  text-align: center;
  display: table-cell;
  background-color: #FAFAD2;
}
#navbar li a {
  display: block;
  color: #4682B4;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#navbar li a:hover:not(.active) {
  background-color: #FAF0E6;
}
#navbar .active {
  background-color: #FAFAD2;
}
#header {
  width: 100%;
  text-align: center;
  position: relative;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
<div id="header">
  <h1>Reserved</h1>
</div>
<div id="navbar">
  <ul>
    <li><a class="active" href="#home">Home</a>
    </li>
    <li><a href=“#Experience”>Experience</a>
    </li>
    <li><a href=“#Consulting Services“>Consulting Services</a>
    </li>
    <li><a href=“#Contact”>Contact</a>
    </li>
    <li><a href=“#About”>About</a>
    </li>
  </ul>
</div>

Any help would be greatly appreciated!
Also, sorry for any formatting issues with this post!

Upvotes: 0

Views: 5225

Answers (3)

LOTUSMS
LOTUSMS

Reputation: 10240

Reset your margin on your unordered list like this:

#navbar ul {
    background-color: #FAFAD2;
    margin-left: -40px; /*solution 1 */
    padding:0; /*solution 2 */
}

Unless you use a reset css or some framework that gives your ULspecific instructions, you can expect your browser's instructions to be defaulted. In this case (Chrome) the browser user agent adds a 40px margin start. You have compensate for it to nullify it.

Solution 2 by Mr Lister also works. However, you'll still have to deal with those 40px later on in another encounter. I'd rather indent my ULs what I want, not what the browser think it's best ;)

See the image

enter image description here

MOst CSS frameworks (Bootstrap, foundation, etc ) or reset.CSS and Modifyer.CSS have this reset in consideration.

See your solved DEMO

Upvotes: 2

William
William

Reputation: 156

I think you naar this peace of css

#navbar {margin: 0px; padding: 0px; width: 100%; }

For the menu in top in your site use posistion:fixed; in tour #navbar

Upvotes: 0

Stefan Neuenschwander
Stefan Neuenschwander

Reputation: 833

You can also fix this by removing the float on the <li>

#navbar li {
  width: 20%;
  text-align: center;
  display: table-cell;
  background-color: #FAFAD2;
}

Working example: https://fiddle.jshell.net/8cbhvj6o/

Upvotes: 0

Related Questions