제목 컨테이너 div 너비가 탐색 div와 간섭합니다

Question

제목 컨테이너 너비가 960px로 설정되어 있지만 내비게이션 막대 div가 전체 행을 차지하고 탐색 막대 div가 끝까지 이동하지 못하게 방해합니다. 상단.

body, 
 
html { 
 
    height: 0 auto; 
 
    height: 100%; 
 
    margin: 0; 
 
    width: ; 
 
    padding: 0; 
 
    font-family: 'Ubuntu', sans-serif; 
 
    background-color: #34495e; 
 
} 
 
.container { 
 
    padding: 5px 5px 5px 5px; 
 
    position: relative; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    max-width: 2000px; 
 
    text-align: center; 
 
    background-color: #ecf0f1; 
 
} 
 
.h1 { 
 
    font-size: 30px; 
 
    text-align: center; 
 
} 
 
.sidebar { 
 
    overflow: hidden; 
 
    height: 100%; 
 
    display: inline-block; 
 
    position: fixed, 0px 0 0px 0px; 
 
    width: 200px; 
 
    padding: 5px; 
 
    background: #333; 
 
    z-index: 0; 
 
    text-decoration: none; 
 
} 
 
.sidebar li { 
 
    cursor: pointer; 
 
    padding-bottom: 5px; 
 
    text-decoration: none; 
 
    color: white; 
 
    list-style-type: none; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <h1 class="h1">Nicholas Peppas</h1> 
 
    <hr color="black" width="260px"> 
 
    </div> 
 
</div> 
 

 
<div class="sidebar"> 
 
    <ul> 
 
    <li>Home</li> 
 
    <li>About Nick!</li> 
 
    <li>Services</li> 
 
    <li>Contact Nick!</li> 
 
    </ul> 
 
</div>

CodePen

Answer 1

이 당신이

.sidebar { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
}