CODEWITHSUNDEEP
htmlcss
Vaishak
Vaishak

Reputation: 97

Additional space when creating navigation bar

I am trying to create a navigation bar using CSS. I get an additional space on the left when I load the HTML. Could you please help me in identifying what could be wrong. 

/* Navigation Bar Properties */

.navigation {
  background-color: #404040;
  border-radius: 5px;
  height: 35px;
  line-height: 35px;
}

.navigationText {
  list-style-type: none;
}

.navigationText li {
  display: inline;
}

.navigationText li a {
  text-decoration: none;
  color: white;
  padding: 7px;
  font-size: 17px;
  font-family: Verdana;
}

.navigationText li a:hover {
  color: #000;
  background-color: white;
}
<div class="navigation">
  <ul class="navigationText">
    <li><a href=''>Home</a></li>
    <li><a href=''>Questions</a></li>
    <li><a href=''>Contact</a></li>
  </ul>
</div>

I would ideally like Home button to be placed at left without any space. Any inputs

Thanks

Upvotes: 0

Views: 33

Answers (1)

Alexander
Alexander

Reputation: 4527

Just remove space around the ul's content setting the padding property value:

.navigationText {
  padding: 0;
  list-style-type: none;
}

Upvotes: 2

Related Questions