我的標題容器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; 
 
}