Display Logo inline with menu items in HTML and CSS - html

Question

I am trying to display logo at top end in HTML and CSS.
However, the logo image size is not reduced to the specified width and height and I do not see it being overridden anywhere else.
Code is as follows:
/*********************************************************************************/
/* 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;
}
<div id="wrapper">
<div id="menu-wrapper">
<div id = "Logo" >
<img src="images/Logo.jpg" ></img>
</div>
<div id="menu" class="container">
<ul>
<li class="current_page_item">Homepage</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
/*and so on */
</div>
It looks like this:
White part in the banner is image that is taking up the width despite of having set width attribute to 10 px.

Answer 1

In your CSS. change the style for #Logo to #Logo img{}. you have to set the width to img tag. Not its parent container.
#Logo img{
width:100px;
height:30px;
float: left;
margin-top: 5px;
}
JS Fiddle