0

I'm trying to build an orange nav bar that uses 100% of the viewport width and doesn't leave any blank space at the top. Obviously, I'm doing something very wrong because my nav currently has blank space on the left, right and at the top.

I'm somewhat new to CSS. Could a kind soul please point me to the right direction?

Thanks.

body {
  background-color: black;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

nav {
  width: 100%;
  height: 100%;
  background-color: orange;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

h1 {
  text-transform: uppercase;
  text-align: center;
  color: white;
}

nav ul {
  list-style-type: none;
}

nav li a {
  display: inline-block;
  color: white;
}
<nav>
  <ul>
    <li><a href="#">Sign Up</a></li>
    <li><a href="#">Login</a></li>
  </ul>
</nav>
<br>
<h1>I Cook Rice for:</h1>
<aside></aside>
<div id="maincontent"></div>
Yousaf
  • 27,861
  • 6
  • 44
  • 69
Nicolas Henrion
  • 11
  • add `margin: 0;` to `ul`. If you inspect the `ul` element using browser dev tools, you will see that space is because of the default margin of `ul` element. – Yousaf Aug 04 '20 at 07:54
  • 1
    _“please point me to the right direction?”_ - that direction should be your browser’s _developer tools_ - you can easily _inspect_ the elements on your page using those, and find out where margins/paddings actually come from. – CBroe Aug 04 '20 at 07:59
  • https://jsfiddle.net/eob3vkx6/, a few tips for you: set display: flex; then you are able to set justify-content: center. this is extremely useful when writing navigation bars. Plus, the list li tag must be included to style it display property, so they can display in a parallel line – Weilory Aug 04 '20 at 08:25

1 Answers1

3

By the browser, ul elements have some margin in default. Change your selector to:

nav ul {
    list-style-type: none;
    margin: 0;
}
Petr Nečas
  • 426
  • 3
  • 11