title: Display Logo inline with menu items in HTML and CSS
body: <p>I am trying to display logo at top end in HTML and CSS.</p>
  
  <p>However, the logo image size is not reduced to the specified width and height and I do not see it being overridden anywhere else.</p>
  
  <p>Code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*********************************************************************************/
  /* Banner                                                                        */
  /*********************************************************************************/
  
  #banner 
  {
    overflow: hidden;
    height: 300px;
    position: relative;
    background: url(images/pic01.jpg) no-repeat center;
    background-size: cover;
  }
  
  #banner .image
  {
  }
  #banner p{
    position: absolute; 
    top:30%;
    left: 40%;
    width: 100px;
    padding: 5px; 
    margin: 5px;
    font-family: 'Lobster', cursive;
    font-weight: bold; 
    font-size: 55px;
    color: #fff;
  }
  
  /** MENU */
  
  #menu-wrapper
  {
    background: #16a085;
    overflow:auto;
  }
  
  #menu {
    overflow: hidden;
    height: 100px;
    float:left;
  }
  
  #menu ul {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
  }
  
  #menu li {
    display: inline-block;
  }
  
  #menu a {
    display: block;
    letter-spacing: 1px;
    padding: 0px 40px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.80em;
    line-height: 100px;
    border: none;
    color: #FFF;
  }
  
  #menu a:hover, #menu .current_page_item a {
    text-decoration: none;
  }
  
  #menu .current_page_item a {
    background: #1abc9c;
  }
  
  #Logo{
    width:10px;
    height:30px;
    float: left;
    margin-top: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div id="menu-wrapper"&gt;
      &lt;div id = "Logo" &gt;
        &lt;img src="images/Logo.jpg" &gt;&lt;/img&gt;
    &lt;/div&gt;
    &lt;div id="menu" class="container"&gt;
  
      &lt;ul&gt;
        &lt;li class="current_page_item"&gt;&lt;a href="#"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&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;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    /*and so on */
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It looks like this:</p>
  
  <p>White part in the banner is image that is taking up the width despite of having set width attribute to 10 px.</p>
  
  <p><img src="https://i.stack.imgur.com/Y1Ejb.png" alt="enter image description here"></p>