Неправильная ширина страницы, необходимая для прокрутки

Question

У меня возникли проблемы с этим расположением, все выглядит хорошо, однако страница идет дальше справа, при этом ничего не остается. Я пробовал все, что ничто не работает.

.container.open-sidebar { 
    position: relative; 
    left: 240px; 
} 

#sidebar ul li a { 
    padding: 15px 20px; 
    height: 100%; 
    font-size: 16px; 
    font-weight: 100; 
    color: white; 
    background: #1a1a1a; 
    text-decoration: none; 
    display: block; 
    border-bottom: 1px solid #1a1a1a; 
    -webkit-transition: background 0.3s ease-in-out; 
    -moz-transition: background 0.3s ease-in-out; 
    -ms-transition: background 0.3s ease-in-out; 
    -o-transition: background 0.3s ease-in-out; 
    transition: background 0.3s ease-in-out; 
} 

.main-content { 
    width: 100%; 
    height: 100%; 
    padding: 10px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    position: relative; 
} 

HTML:

<div class="container open-sidebar"> 
    <div id="sidebar"> 
    content 
    </div> 
</div> 

Это то, что заставляет эту проблему. Thats первый div, а затем все сдвигается слева, что делает пустое пространство справа.

Как исправить это? Благодаря

Answer 1

Это правило, которое вы используете

.container.open-sidebar { 
    position:relative; 
    left: 240px; 
} 

шаги, которые Див 240px вправо, но там до сих пор ширина 100%, так что продлит ширину родительского контейнера на правой стороне на 240px.

Если вы добавите width: calc(100% - 240px);, он должен решить вашу проблему.