Location of <a> buttons does not stick to its location
<p>I have a 3 <code>&lt;a&gt;</code>'s to get the text you want, but it moves with the text that you want to get, it goes up and down with the text:</p>

<p><a href="https://i.stack.imgur.com/3CsSb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3CsSb.png" alt="why"></a></p>

<p>It keeps resizing with them and i've been trying to change this for a hour.</p>

<p>This is my css:</p>

<pre><code>* {
padding: 0;
margin: 0;
}
#nav {
//background-color: #666;
position: fixed;
width: 100%;
background: linear-gradient(#009940, #009900, #009800);
}

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

#nav li  {
float: left;
}

#nav li a {
display: block;
transition: background-color 0.5s ease;
color: white;
font-size: 16px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
}

#container {
width: 70%;
margin-left: 15%;
vertical-align: top;
height: 140%;
background-color: #e6e6e6;
}

#nav li a:hover {
background-color: #396108;
}

#nav li a img {
position: absolute;
margin-top: -0.4%;
margin-left: -1%;
}


#Text-marge {
margin-left: 30%;
margin-top: 0.2%;
width: 45%;
height: 29.5%;
padding-left: 4px;
background-color: gray;
overflow: hidden;
float: left;
}

#text-marge &gt; p {
margin-left: 5%;
margin-top: 8%;
vertical-align: top;
}

#clicker &gt; p {
display: inline-block;
//position: absolute;
float: left;
vertical-align: top;
}

#clicker {
margin-left: 28%;
margin-top: 12%;
}

#clicker ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

#clicker li  {
float: left;
}

#clicker li a {
display: block;
font-size: 24px;
padding: 14px 18px;
text-decoration: none;
color: white;
float: left;
}

#text {

}
</code></pre>

<p>and this my HTML:</p>

<pre><code>    &lt;html&gt;
    &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
    &lt;title&gt;Homepage&lt;/title&gt;
    &lt;script&gt;

    function runButton1() {
    document.getElementById("text").innerHTML = "";
    }

    function runButton2() {
    document.getElementById("text").innerHTML = "b";
    }

    function runButton3() {
    document.getElementById("text").innerHTML = "c";
    }

    &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;

    &lt;div id="nav"&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="/pag2.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/pag2.html"&gt;Interreses&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/pag2.html"&gt;Groepsleden&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/pag2.html"&gt;Opleiding&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/pag2.html"&gt;Fotogalerij&lt;/a&gt;&lt;/li&gt;
    &lt;li style="float: right;"&gt;&lt;a style="width: 20px; height: 20px;" href="/index.html"&gt;&lt;img src="logo.png"&gt;&lt;/img&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div id="container"&gt;
    &lt;img style="margin-top: 10%; margin-left: 5%; width: 25%;" align="middle" src="geslaagd.png"/&gt;
        &lt;h1 style="margin-left: 12%; margin-top: -32%;"&gt;Geslaagd!&lt;/h1&gt;
    &lt;div id="Text-marge"&gt;
        &lt;p id="text"&gt;In 2016 ben ik geslaagd en kon ik mijn droom opleiding volgen &lt;br&gt; en die opleiding heet: "Applicatie Ontwikkelaar" &lt;br&gt; ik hou van programmeren en dus vond ik dat het bij mij past &lt;br&gt; daarom had ik zo hard mogelijk gewerkt om het te halen. &lt;br&gt; Nu zit ik in een leuk project team waar je ook over kan lezen op &lt;br&gt; deze site, Kyran, Luuk, Collin, Dewi, Jeremy en Xander &lt;br&gt; zijn mijn teamleden. &lt;br&gt; Ik ben 17 jaar oud&lt;/p&gt;
    &lt;div id="clicker"&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a onclick="runButton1()"&gt;*&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a onclick="runButton2()"&gt;*&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a onclick="runButton3()"&gt;*&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;


&lt;/html&gt;
</code></pre>