Bootstrap messed up button with link
<p>I made a navigation bar in bootstrap with a button that links to another page where you can login (I'm still working on that login part) But as soon as i put the link (Href) between the button the whole navbar gets messed up. I can show an example with picture's </p>

<ol>
<li>This is the normal version: <a href="http://prntscr.com/cq09nx" rel="nofollow">http://prntscr.com/cq09nx</a></li>
<li>This is the messed up version: <a href="http://prntscr.com/cq09io" rel="nofollow">http://prntscr.com/cq09io</a></li>
</ol>

<p>I just can't figure out how to get it right again. 
Here is the HTML Code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  margin: 0;
  padding: 0;
  background-color: #42A2CE;
}
 ::selection {
  background: white;
}
@font-face {
  font-family: "Nexa Light";
  src: url('../font/Nexa%20Light.otf');
}
@font-face {
  font-family: "Lato-Bold";
  src: url('../font/Lato-Bold.ttf');
}
.navbar-default {
  position: relative;
  font-family: "Lato-Bold";
  background-color: white;
  box-shadow: 20px;
  padding: 15px;
  border-radius: 0;
  border: none;
  font-size: 25px;
  -webkit-box-shadow: 0 12px 8px -6px #999;
  -moz-box-shadow: 0 12px 8px -6px #999;
  box-shadow: 0 12px 8px -6px #999;
}
.navbar-header {
  right: auto;
}
.navbar-nav &gt; li {} .navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: black;
  font-size: 30px;
}
.navbar-default .navbar-nav &gt; li &gt; a {
  color: black;
}
.navbar-default .navbar-nav &gt; li &gt; a:hover,
.navbar-default .navbar-nav &gt; li &gt; a:focus {
  color: black;
  opacity: 0.5;
}
.navbar-default .navbar-nav &gt; .active &gt; a,
.navbar-default .navbar-nav &gt; .active &gt; a:hover,
.navbar-default .navbar-nav &gt; .active &gt; a:focus {
  color: black;
  background-color: transparent;
}
.navbar-default .navbar-text {
  color: #FFF;
}
.navbar-default .navbar-toggle {
  background-color: grey;
}
.icon-bar {} .navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: rgb(44, 44, 45);
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #FFF;
}
.col-md-5 {
  font-family: "Lato-Bold";
  padding: 10px;
  color: white;
  font-size: 20px;
}
.col-md-12 {
  font-family: "Lato-Bold";
  height: 520px;
  padding: 10px;
  color: white;
}
.navbar-collapse {
  border: 0px;
}
.navbar-default .navbar-collapse {
  color: #e7e7e7;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: transparent;
  box-shadow: none;
}
.dropdown-menu {
  background-color: transparent;
  ;
  text-decoration-color: black;
}
.dropdown-toggle {
  background-color: transparent;
  color: black;
}
.navbar-default .navbar-nav .open .dropdown-menu&gt;li&gt;a,
.navbar-default .navbar-nav .open .dropdown-menu {
  background-color: black;
  color: white;
}
.dropdown-menu:hover {
  color: rgb(44, 44, 45);
}
.img-responsive {
  text-align: right;
  max-width: 100%;
  width: 200px;
  height: 200px;
}
#footer {
  height: 200px;
  color: lightgrey;
}
.link {
  text-decoration: none;
  color: lightgrey;
}
.link:hover {
  color: yellow;
  text-decoration: none;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 10px 16px;
}
.btn-lg {
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
.btn-primary {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}
.btn-primary.raised {
  box-shadow: 0 3px 0 0 #007299;
}
.btn-primary.raised:active,
.btn-primary.raised.active {
  background: #33a6cc;
  box-shadow: none;
  margin-bottom: -3px;
  margin-top: 3px;
}
.btn {
  padding: 14px 24px;
  border: 0 none;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: 0 none;
}
.btn-primary {
  background: #0099cc;
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open &gt; .dropdown-toggle.btn-primary {
  background: #33a6cc;
}
.btn-primary:active,
.btn-primary.active {
  background: #007299;
  box-shadow: none;
}
.btn-primary.raised:active,
.btn-primary.raised.active {
  background: #33a6cc;
  box-shadow: none;
  margin-bottom: -3px;
  margin-top: 3px;
}
.navbar-right {
  padding-right: 100px;
}
.navbar-brand {
  padding-left: 50px;
}
.img-responsive {
  display: block;
  height: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;title&gt;Niet beschikbaar&lt;/title&gt;
  &lt;link rel="shortcut icon" href="img/favicon2.ico" type="image/x-icon"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;
  &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;!-- NAVIGATIE BALK --&gt;
  &lt;nav class="navbar navbar-default" role="navigation"&gt;
    &lt;!-- logo --&gt;
    &lt;div class="navbar-header"&gt;
      &lt;!--  --&gt;
      &lt;a class="navbar-brand" href="#"&gt;
        Logo
      &lt;/a&gt;

      &lt;!-- Inklappbaar ding als je op mobiel zit--&gt;
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;

    &lt;!-- menu eitems  linker kant--&gt;
    &lt;div class="collapse navbar-collapse" id="mainnavbar"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;

        &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="paginas/overmij/index.html"&gt;Over mij&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;

        &lt;!-- Dropdown --&gt;
        &lt;!--
        &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Profiel &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Profiel&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Instellingen&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        --&gt;
        &lt;li&gt;
          &lt;a href="paginas/login/index.html"&gt;
            &lt;button type="button" class="btn btn-primary btn-lg raised"&gt;Aanmelden&lt;/button&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;


      &lt;!-- Aan de rechterkant --&gt;


  &lt;/nav&gt;

  &lt;!-- EINDE NAVIAGTIE BALK--&gt;



  &lt;div class="container-fluid"&gt;

    &lt;div class="row"&gt;

      &lt;div class="col-xs-12 col-md-5 col-md-offset-2"&gt;
        &lt;h1 class="titel"&gt;Deze website is helaas nog niet beschikbaar&lt;/h1&gt;
        Er word momenteel gewerkt aan deze website. Probeer op een later moment terug te komen. Er wordt echt heel erg hard gewerkt aan deze website, zo hard zelfs dat het waarschijnelijk nooit af komt. Maar dat boeit niemand want niemand bezoekt deze website.
        Deze website is alleen bekeken door mensen die ik ken. Want niemand is geintresseert in mijn website wat ik heel klote vindt. Wat ik ook niet begrijp is dat je nog door leest

        &lt;br&gt;
        &lt;br&gt;Rainier,
        &lt;img src="img/Maintance.png" class="img-responsive" alt="" style="float:right" /&gt;
        &lt;br&gt;
        &lt;br&gt;

        &lt;!--
      &lt;/div&gt;

  &lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;



    </code></pre>
</div>
</div>
</p>

<p>I'm just a beginner in bootstrap as you can tell. I hope you guys can help me out with this. Thank you in advance</p>

<p>Rainier,</p>