ナビゲーションバーには、私は、コンテナと私のnav要素のすべてを持っていて何の容器内部

Question

でも

Here is my html code! 
<div id="container"> 
     <div class="main-header"> 
      <img id="logo" src="images/1.jpg" alt="vector"> </img> 
<!-- using another div inside of it navigation bar and logo--> 
      <nav class="main-nav"> 
      <!-- remember you have to have floating elements 
      inside of non floating object like main-nav --> 
       <ul> 
        <li><a class ="active "href="#"> Home </a></li> 
        <li><a href="#"> About </a></li> 
        <li><a href="#"> Contact </a></li> 
        <li><a href="#"> Services </a></li> 
        <li><a href="#"> Colaborate </a></li>  
       </ul> 
      </nav> 
     </div> 
    </div> 
Here is my css code! 
    #container{ 
     width:80%; /* again using 80% just to make fluid other wise it could 
     be 960 px; --*/ 
     margin:0 auto; 
     background-color:#2EFEF7; 
     overflow:auto; 
     clear:both; 

} 

#logo{ 
    width:20%; 
    margin:10px 0px;  
} 
.main-nav{ 
    background-color:#882433; 
    height:30px; 
    border-radius:5px; 
    border:px solid #c13046; 
    color:white; 
    } 
     .main-nav ul{ 
     list-style:none; 
     margin:0; 
     padding:0; 
     display:inline-block;  

     } 
    .main-nav li{ 
    color:#ffffff; 
    float:left; 
    margin-left:3px; 

    } 
    .main-nav li a{ 
    color:#ffffff; 
    /* this is used to escape from scroll bar*/ 
    padding:10px 20px; 
    height:20px; 
    display:inline-block; 

} 
    .main-nav li a:hover{ 
    background-color:#efeadd; 
    color:#666666; 
    border-radius:5px; 

} 
.main-nav li a:active{ 
    background-color:#efeadd; 
    color:#666666; 
    border-radius:5px; 

}

流体ませんそれの内側にあるが、問題は、コンテナは、ナビゲーションバーをラッピングされていないです。第2の問題：このナビゲーションバーが流動的でないという問題は、私が初心者であるために私のブラウザでスケールダウンしてもうまくいかないことを意味します。

Answer 1

まず、IMGは、自己終了タグですので、> セカンド< /スペースがあってはならない、あなたはCSSで

img {max-width:100%; height: auto}