div breaking the Navigation Menu completely - html

Question

I have a navigation menu which works perfectly fine on large screen and mobile screen but as soon as i add a div above it, It breaks the navigation menu on large screen and mobile screen. See the fiddle here - https://jsfiddle.net/AwesomeHat/t9q2p2ut/ .
Navigation Menu when alone works perfectly fine see the fiddle here - https://jsfiddle.net/AwesomeHat/dwzhh6L1/.
Please increase & decrease the size of output window to see the menu's responsiveness and see how it is breaking the menu on both screens.
<!--Social Icons-->
<div id="social">
<a href="#" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<a href="#" class="icon-button linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i>
<a href="#" class="icon-button google-plus"><i class="fa fa-google-plus" aria-hidden="true"></i>
<a href="#" class="icon-button twitter"><i class="fa fa-twitter" aria-hidden="true"></i>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook" aria-hidden="true"></i>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu ☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>Whats New
<ul class="hidden">
<li>Just Launched</li>
<li>Launching Soon</li>
<li>Completed Projects</li>
</ul>
</li>
<li>Referral</li>
<li>Buyers Section
<ul class="hidden">
<li>EMI Calculator</li>
<li>Apply For Loan</li>
<li>Make an Enquiry</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
CSS Code -
/* logo */
.logo {
float: left;
margin-left: 55px;
margin-top: 30px;
}
/* Social Icons */
.icon-button {
display: inline-block;
color: white;
border: 0px;
font-size: 1.0rem;
line-height: 1.7rem;
margin: 1px;
text-align: center;
width: 1.7rem;
margin-top: 60px;
float: right;
overflow: hidden;
}
.facebook {
background-color: #3B5998;
}
.twitter {
background-color: #4099ff;
}
.google-plus {
background-color: #db5a3c;
}
.linkedin {
background-color: #007fb1;
}
.wikipedia {
background-color: white;
overflow: hidden;
color: black;
margin-right: 100px;
}
.icon-button:hover {
background-color: rgba(165,219,89,1);
transition: 1s;
transform: rotate(360deg);
}
/* Navigation Menu */
nav ul {
list-style-type:none;
margin-top: 170px;
padding:0;
position: absolute;
width: 100%;
z-index: 2;
}
nav ul li {
display:inline-block;
float: left;
width: 14.2857%; /* fallback for non-calc() browsers */
width: calc(100% / 7);
}
nav ul li a {
display:block;
min-width:140px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
background: #161616;
text-decoration: none;
}
nav ul li:hover a {
color: rgb(165,219,89);
}
nav ul li:hover ul a {
color: #fff;
height: 40px;
line-height: 40px;
}
nav ul li:hover ul a:hover {
color: rgb(165,219,89);
}
nav ul li ul {
margin-top: 0px;
display: none;
}
nav ul li ul li {
display: block;
float: none;
width: 200px;
}
nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
width: 25%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #161616;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
#media screen and (max-width : 760px){
nav ul {
position: relative;
margin-top: 0px;
display: none;
}
nav ul li, li a {
width: 90%;
}
nav ul li ul {
margin-top: 0px;
display: block;
}
nav ul li ul li {
width: 90%;
}
.show-menu {
display:block;
}
}

Answer 1

Syntax error, close anchor tags inside social div
<div id="social">
<i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
https://jsfiddle.net/Nagasai_Aytha/t9q2p2ut/2/

Answer 2

At 1st div your code will be like this:
<div id="social">
<i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
You just forget to finish anchorage tag </a>