Cant seem to remove this vertical space between two divs

Question

I cant seem to remove a white gap between the div element and . I tried all sorts of thing such as reducing the margin and padding. But the whitecap does not go away. Any help is appreciated. Below is the HTML Code:

#container {
  width        : 1300px;
  margin-right : auto;
  margin-left  : auto;
  background   : #EEE;
}

#header {
  background: rgb(197, 177, 224);
  padding-top : 5px;
  color       : black;
  text-align  : center;
  padding-bottom: 5px;
  border-style: solid;
}
#nav{
  margin-bottom: 0px;
  background: red;
}


#nav ul {
  list-style-type : none;
  padding: 0px;
}

#nav li {
  width          : 258px;
  float          : left;
  padding-top    : 5px;
  padding-bottom : 5px;
  border-width   : 1px;
  border-style   : solid;
  background     : #FEF123;
  text-align     : center;
}

 <div id="container">
    <div id="header">
      <h1>Test Website 3</h1>
    </div>
    <div id="nav">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Stuff</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Logging In</a></li>
      </ul>
    </div>

Answer 1

#nav ul {
  list-style-type : none;
  padding: 0px;
  margin: 0;
}

That did the trick :D

#container {
  width        : 1300px;
  margin-right : auto;
  margin-left  : auto;
  background   : #EEE;
}

#header {
  background: rgb(197, 177, 224);
  padding-top : 5px;
  color       : black;
  text-align  : center;
  padding-bottom: 5px;
  border-style: solid;
}
#nav{
  margin: 0;
  background: red;
}


#nav ul {
  list-style-type : none;
  padding: 0px;
  margin: 0;
}

#nav li {
  width          : 258px;
  float          : left;
  padding-top    : 5px;
  padding-bottom : 5px;
  border-width   : 1px;
  border-style   : solid;
  background     : #FEF123;
  text-align     : center;
}

<div id="container">
    <div id="header">
      <h1>Test Website 3</h1>
    </div>
    <div id="nav">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Stuff</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Logging In</a></li>
      </ul>
    </div>

Answer 2

Your ul element is having a margin of 16px. Remove that.

#container {
  width        : 1300px;
  margin-right : auto;
  margin-left  : auto;
  background   : #EEE;
}

#header {
  background: rgb(197, 177, 224);
  padding-top : 5px;
  color       : black;
  text-align  : center;
  padding-bottom: 5px;
  border-style: solid;
}
#nav{
  margin-bottom: 0px;
  background: red;
}


#nav ul {
  list-style-type : none;
  padding: 0px;
  margin: 0;
}

#nav li {
  width          : 258px;
  float          : left;
  padding-top    : 5px;
  padding-bottom : 5px;
  border-width   : 1px;
  border-style   : solid;
  background     : #FEF123;
  text-align     : center;
}

 <div id="container">
    <div id="header">
      <h1>Test Website 3</h1>
    </div>
    <div id="nav">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Stuff</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Logging In</a></li>
      </ul>
    </div>

Answer 3

You mean white-space between header and nav, if so that's because of default ul tag styling properties which you need to change to reduce that spacing.

Default ul properties,

ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

As you could see in above properties that it has margin-top and margin-bottom as 1em, so if you change that to 0 will reduce that white space.

#container {
  width: 1300px;
  margin-right: auto;
  margin-left: auto;
  background: #EEE;
}

#header {
  background: rgb(197, 177, 224);
  padding-top: 5px;
  color: black;
  text-align: center;
  padding-bottom: 5px;
  border-style: solid;
}

#nav {
  margin-bottom: 0px;
  background: red;
}

#nav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0;
}

#nav ul li {
  width: 258px;
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
  border-width: 1px;
  border-style: solid;
  background: #FEF123;
  text-align: center;
}

<div id="container">
  <div id="header">
    <h1>Test Website 3</h1>
  </div>
  <div id="nav">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Portfolio</a></li>
      <li><a href="">Stuff</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Logging In</a></li>
    </ul>
  </div>