Collapsible nav bar not working as expected and creating unnecessary padding (Not using bootstrap)

Question

I am trying to create a simple navigation bar which when resized (made smaller) will create a small menu which once clicked will show the links, much like Bootstrap.

Issue 1: When resized the links do disappear, as intended, but when I expand the mini menu (click show navigation), the links (link 1, link 2 etc) show up on my logo and just in general off place ( I want the links to show up neatly, like the image below).

Issue 2: As you will see with image below, the code I have, for some reason causes a gap to emerge between each <li>.

Here is a fiddle created to show the issues and the code used: https://jsfiddle.net/n00jg7xy/

Answer 1

FOr the second problem, about padding, the problem is here:

#nav > ul > li{
  width: 25%; //Here you are forcing to 1/4 of the space, remove this line
  height: 100%;
  float: left;
}

I dont know if the snippet size is going to let you see the change, here is the fiddle.

#wrapper{
    width: 100%;
    height: auto;
}

#header{
    height: auto;
    border-bottom: 1px solid black;
}

#logo {
    float: left;
}

/******************* Main Navigation ************************/

.mainNav{
    margin: 10px; 
}

#nav > a{
    display: none;
}

#nav li{
    position: relative;
}
 
#nav > ul{
    height: 3.75em;
}

#nav > ul > li{
    height: 100%;
    float: left;
}

#nav li ul{
    display: none;
    position: absolute;
    top: 100%;
}

#nav li:hover ul{
    display: block;
}

@media only screen and ( max-width: 40em ){
    #nav{
        position: relative;
    }
        #nav > a{
        }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type
        {
            display: block;
        }
 
    /* first level */
 
    #nav > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
        #nav:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {
            width: 100%;
            float: none;
        }
 
    /* second level */
 
    #nav li ul
    {
        position: static;
    }
}

/***********************/

/* Remove margins and padding from the list*/
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Float the list items side by side */
ul.topnav li {
    float: left;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {
    background-color: #f9f9f9;
    color: darkred;
    transition: 0.3s;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
    display: none;
}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

<div id="wrapper">

  <p>
    Resize the window
  </p>
  <div id="header">
    <div><img id="logo" src="http://i65.tinypic.com/352i0jq.jpg" alt="logo" href="#"> </div>
    <div class="mainNav">
      <nav id="nav" role="navigation">
        <a href="#nav" title="Show navigation">Show navigation</a>
        <a href="#" title="Hide navigation">Hide navigation</a>
        <ul class="topnav" id="myTopnav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#"> Link 3</a></li>
          <li><a href="#"> Link 4</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>
<!-- wrapper closed-->