 <p>You can add <code>float: left</code> to your new element to give it the correct position, but don't forget to the a <code>max-width</code> to your <code>&lt;ul&gt;</code> so it doesn't push the other element out. Also I removed the <code>margin</code> of the new element to make it fit within the black background.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#nav{ background-color: #222; } #nav_wrapper{ width: 960px; margin:0 auto; text-align: right; padding: 0; font-family: Arial; font-size: 18px; /* font: Batang; */ } @font-face { font: Batang; src: url('batang.tff'); } #nav_wrapper .current{ background-color: #333; } #nav ul{ list-style-type: none; padding: 0; margin: 0; max-width: 800px; } #nav ul li{ display: inline-block; } #nav ul li img{ vertical-align: middle; padding-left: 10px; } #nav ul li:hover{ background-color: #333; transition: all 0.4s; } #nav ul li a,visited{ color: #ccc; display: block; padding: 15px; text-decoration: none; } #nav ul li a:hover{ color; #ccc text-decoration: none; } #nav ul li:hover ul{ display: block; } #nav ul ul{ display: none; position: absolute; background-color: #333; border: 5px solid #222; border-top: 0; margin-left: -5px; min-width: 200px; text-align: left; } #nav ul ul li{ display: block; } #nav ul u li a,visited{ color; #ccc; } #nav ul ul li a:hover{ color: #099; transition: all 0.3s; } #nav_wrapper .logo{ position: relative; float: left; color: gold; font-size: 60px; font-family: Batang; margin: 0; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav_wrapper"&gt; &lt;div id="nav"&gt; &lt;p class="logo"&gt;IVERSEN&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;a class="current" href="home.html"&gt;Hjem&lt;/a&gt;&lt;/li&gt;&lt;li&gt; &lt;a href="#"&gt;Om&lt;/a&gt;&lt;/li&gt;&lt;li&gt; &lt;a href="#"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;&lt;li&gt; &lt;a href="#"&gt;Projekter&lt;img src="images\arrow.png"/&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Batch&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;HTML/CSS&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>