title: putting logo on navbar affects the whole text on the navbar
body: <p>I got a problem with a website navbar it is too wide because of the logo I put and it affects the text making them all stuck to the top how can I make the text or logo align with each other?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #242626;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  li {
    float: left;
  }
  
  li a, .dropbtn {
    display: inline-block;
    color: #cedacb;
    text-align: center;
    padding: 14px 16px;
    widht: 120px;
    min-height: 60px;
    vertical-align: top;
    text-decoration: none;
  }
  
  li a:hover {
    color: white;
  }
  
  &lt;style&gt;
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
  }
  
  .dropdown-content a:hover {
    background-color: #f1f1f1;
    color: black;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  #home {
    width: 120px;
    height: 60px;
    background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
  }
  
  #logo { 
    float: left; 
  }
  
  &lt;/style&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#home"&gt;&lt;img id="home" src="https://st.deviantart.net/minish/main/logo/card_black_large.png" alt="Logo" id="logo"&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#search"&gt;Search&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#news"&gt;Submit&lt;/a&gt;&lt;/li&gt; 
    &lt;li class="dropdown" style="float:right;"&gt;
      &lt;a href="javascript:void(0)" class="dropbtn"&gt;Notification&lt;/a&gt;
      &lt;div class="dropdown-content" style="right:0;"&gt;
        &lt;a href="#"&gt;All Inbox&lt;/a&gt;
        &lt;a href="#"&gt;Inbox&lt;/a&gt;
        &lt;a href="#"&gt;Watch&lt;/a&gt;
        &lt;a href="#"&gt;Note&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;`
  </code></pre>
  
  <p>The Website navbar I'm working on:</p>
  
  <p><img src="https://i.stack.imgur.com/zXQNn.png" alt=""></p>
  
  <p>And to clarify no I'm not working for Deviantart I choose the picture for logo practice and well it wouldn't fit at first then I change the code up so that I could make it fit to the navbar with this code</p>
  
  <pre><code>#home {
  width: 120px;
  height: 60px;
  background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
  }
  </code></pre>
  
  <p>and it screws the text on the navbar how could I fix it so that they all align together?</p>