Links being shifted when clicked (CSS)? <p>I have 3 links styled as a list in html, I used this code in CSS to bring them beside each other:</p> <pre><code>li { float:left; margin-right:15px; margin-top:40px; } </code></pre> <p>But when I click one of them the other link on the right moves towards the one I clicked. I don't know the reason why this happening. but how to make them fixed?</p> <p>The code:: HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt; WebMD - Better information. Better Health. &lt;/title&gt; &lt;link rel="stylesheet" href="mainMd.css"/&gt; &lt;img src="logo_trans.png" class="logo"/&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;ul class="categories"&gt; &lt;li class="links1" id="symp"&gt;&lt;a href=""&gt;Symptoms&lt;/a&gt;&lt;/li&gt; &lt;li class="links1" id="doc"&gt;&lt;a href=""&gt;Doctors&lt;/a&gt;&lt;/li&gt; &lt;li class="links1" id="health"&gt;&lt;a href=""&gt;Health Care Reform&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/header&gt; &lt;section&gt; &lt;/section&gt; &lt;aside&gt; &lt;/aside&gt; &lt;footer&gt; &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS:</p> <pre><code>html { background-image:linear-gradient(to top, white, #F5F9FA); height:100%; } .logo { padding-left:176px; padding-top:4px; float:left; } li { float:left; margin-right:15px; margin-top:40px; font-family:Candara; font-size:12px; color:#5895D4; } #symp { list-style-image:url(walking.png); margin-left:55px; } #doc { list-style-image:url(doc.png); } #health { list-style-image:url(umb.png); } li a { color:#5895D4; text-decoration:none; } li a:hover { text-decoration:underline; } li a:active { } li a:visited { } </code></pre>