내용이 보이지 않고 div가 늘어납니다.

Question

여기 내 HTML이 있습니다. 내가 겪고있는 문제는 'box1'div가 표시되지 않고 'nav'표시 줄 자체가 확장된다는 것입니다. 나는 아무 생각 왜 ...

<div id="nav"> 
    <ul> 
     <li><a class="selected" href="link1">Home</a></li> 
     <li><a href="link2">Services</a></li> 
     <li><a href="link3">About</a></li> 
     <li><a href="link4">Gallery</a></li> 
     <li><a href="link5">Contact</a></li> 
    </ul> 
</div> <!--#nav--> 
<div id="content"> 
    <div class="wrapper"> 
     <div class="box1"> 
      TEXT 
     </div> <!--#box1--> 
     <div class="box1"> 
      IMAGE 
     </div> <!--#box1--> 
    </div> <!--#wrapper--> 
</div> <!--#content--> 

그리고 CSS ...

#nav { 
    background-color: #000; 
} 
#nav ul { 
    margin: 0 auto; 
    width: 80%; 
} 
#nav li { 
    display: inline; 
} 
#content { 
    margin: 0 auto; 
    width: 80%; 
    min-width: 720px; 
} 
.box1 { 
    width: 40%; 
    height: 100px; 
    float: left; 
    position: relative; 
    padding-left: 6.33%; 
} 

제안이 없다?

Answer 1

.box1 { 
    width: 40%; 
    height: 100px; 
    position: relative; 
    padding-left: 6.33%; 
    border: 1px solid #000; 
    margin: 0 auto; 
} 

미리보기 >>http://jsfiddle.net/XJA4T/