title: Dropdown list UL box creates a margin on the left
body: <p>I just began building a website, to make it short:
  I'm making a deadly simple dropdown menu which isnt working out.
  To make it short, i gave every element a background color.
  I would like to know why the boxes behave like that, they 
  have all their own sizes. The grey one is wider than it should be.
  Also the float:right doesnt seem to work on both elements the same. One is further away than the other, they should all be positioned to the right border.
  The red border should disappear also:</p>
  
  <pre><code>#dropdown{
      display:block;
      float:right;
      background:#666;
      width:120px;
  }
  
  #logo-type{
      height:90px;
      background-image:url("https://picload.org/image/rgrwoopr/logo_font.jpg");
      width:90px;
      background-color:green;
      float:right;
  }
  
  #dropdown ul{
      margin-top:91px;
      background-color:red;
      width:120px;
  }
  
  #dropdown ul li{
      font-size:12px;
      width:120px;
      height:40px;
      background-color:black;
      list-style:none;
      text-align:center;
  }
  
  #dropdown ul li a{
      color:white;
    text-decoration:none;
  }
  #dropdown  ul li a:hover{
      text-decoration:none;
  
  }
  #dropdown ul li:hover{  
      background-color:#0C6;
  }
  
  
  &lt;div id="dropdown"&gt;
      &lt;a id="logo-type" href="#"&gt;&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;DELUXETRAVEL&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;BLOG&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;PREMIUM CLUB&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; 
  </code></pre>