HTML / CSS: Unknown "Box" Appears Beside Navigation Bar

Question

All the list items function correctly [The cursor is over home hence the colour change] though there is this additional "box", or whatever you wish to call it, present on the left hand side.

I do not understand why this appears on the left of my navigation bar, I wish to remove it but am not sure how to.

.nav {
  background: #2c3e50;
  -webkit-columns: 7;
  -moz-columns: 7;
  columns: 7;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  -webkit-column-rule: 1px solid #1a242f;
  -moz-column-rule: 1px solid #1a242f;
  column-rule: 1px solid #1a242f;
  list-style-type: none
}
.nav a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 1em;
  text-align: center;
  border-bottom: 1px solid #1a242f;
}
.nav a:hover {
  background: #1a242f;
}
html,
body {
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  margin: 0px;
}

<ul class="nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">History</a>
  </li>
  <li><a href="#">Events</a>
  </li>
  <li><a href="#">Results</a>
  </li>
  <li><a href="#">Pictures</a>
  </li>
  <li><a href="#">Links</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

Brian Ray · Accepted Answer · 2016-04-05T20:48:41.207

9

By default, unordered lists have padding on the left side to keep the text from overlapping the bullets. Add padding: 0; to your nav CSS.

.nav {
  background: #2c3e50;
  -webkit-columns: 7;
  -moz-columns: 7;
  columns: 7;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  -webkit-column-rule: 1px solid #1a242f;
  -moz-column-rule: 1px solid #1a242f;
  column-rule: 1px solid #1a242f;
  list-style-type: none;
  padding: 0;
}
.nav a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 1em;
  text-align: center;
  border-bottom: 1px solid #1a242f;
}
.nav a:hover {
  background: #1a242f;
}
html,
body {
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  margin: 0px;
}

<ul class="nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">History</a>
  </li>
  <li><a href="#">Events</a>
  </li>
  <li><a href="#">Results</a>
  </li>
  <li><a href="#">Pictures</a>
  </li>
  <li><a href="#">Links</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

edited Apr 05 '16 at 20:48

answered Apr 05 '16 at 20:45

Brian Ray

1,482
3
20
20

1

Beat me to it, I think padding-left: 0; is better though. – OrderAndChaos Apr 05 '16 at 20:48
I really appreciate the assistance! By the way, rather than making a new post, may I ask why is there a gap present between the browser and the top of the navigation bar? I assumed margin: 0 would fix this though it only removed the gap on the side of the navigation bar. https://i.gyazo.com/2f6f27052b526977137fd1ba8eca6705.png – Aontaigh Apr 05 '16 at 20:50
@Aontaigh, there's an answer to that over [here](http://stackoverflow.com/questions/13127887/html-default-body-margin). – Brian Ray Apr 05 '16 at 20:52
@Brian Ray I have margin: 0px already set, I also added padding: 0px [Both to the body] but with no success. – Aontaigh Apr 05 '16 at 20:54
Try adding `margin: 0` to your .nav. The unordered list has `margin-top` and `margin-bottom` by default. – Brian Ray Apr 05 '16 at 20:57
I didn't realise I forgot to add it to the .nav, that worked. Thanks! – Aontaigh Apr 05 '16 at 20:59

score 2 · Answer 2 · answered Apr 05 '16 at 20:46

Your <ul> element has default padding. Remove it by adding padding:0 to your .nav class.

.nav {
  background: #2c3e50;
  -webkit-columns: 7;
  -moz-columns: 7;
  columns: 7;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  -webkit-column-rule: 1px solid #1a242f;
  -moz-column-rule: 1px solid #1a242f;
  column-rule: 1px solid #1a242f;
  list-style-type: none;
  padding:0;
}
.nav a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 1em;
  text-align: center;
  border-bottom: 1px solid #1a242f;
}
.nav a:hover {
  background: #1a242f;
}
html,
body {
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  margin: 0px;
}

<ul class="nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">History</a>
  </li>
  <li><a href="#">Events</a>
  </li>
  <li><a href="#">Results</a>
  </li>
  <li><a href="#">Pictures</a>
  </li>
  <li><a href="#">Links</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

score 2 · Answer 3 · answered Apr 05 '16 at 20:47

2

the ul element has padding-left by default.

.nav {
    padding-left: 0;
}

This will fix the issue.

answered Apr 05 '16 at 20:47

OrderAndChaos

3,547
2
30
57

HTML / CSS: Unknown "Box" Appears Beside Navigation Bar

3 Answers3