Q:

Menu bar pushes down the body, and links does not align correctly

When I activate the menubar the whole body is pushed down. 
I addition, one of the links is not getting pushed down to the others, but aligns itself with the logo.
How do you fix these two things?
I couldn´t not get it on fiddle to make it easier for you. Here is 
the link anyways, but the menu bar does not work there. Maybe it will 
work for you. 
https://jsfiddle.net/28js95yp/

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.home{
 float:left;
     display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}
<div class="topnav" id="myTopnav">
<a style="float:left" href="#home">Home</a>
 <a href="#contact">Contact</a>
<a href="#news">News</a>
  <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<p>
Minimize the width to get the menu bar. Click on the menu bar, and watch this being pushed down by that nasty navbar. How do you fix that and the misalignment of the logo and one of the links. 
</p>

A:

Just add !important after you add float:none; in small screen  for the links

The cause is: The home link remains floating left so the next link
  will automatically moves next to it

@media screen and (max-width: 600px) {
  ...

  .topnav.responsive a {
    float: none!important;
    display: block;
    text-align: left;
  }

}

And for the content you need to use position:absolute; on the menu to make it overlap the content and add margin-top to content <p> or padding-top to body to show it right after the menu bar
See result below:

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
body {
  margin: 0;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.home {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav {
    position: absolute;
    width: 100%;
    top: 0;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none!important;
    display: block;
    text-align: left;
  }
  .content {
    margin-top: 60px
  }
}
<div class="topnav" id="myTopnav">
  <a style="float:left" href="#home">Home</a>
  <a href="#contact">Contact</a>
  <a href="#news">News</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<p class="content">
  Minimize the width to get the menu bar. Click on the menu bar, and watch this being pushed down by that nasty navbar. How do you fix that and the misalignment of the logo and one of the links.
</p>

