Как нажимать другие элементы вправо, используя боковую панель?

Question

Я хочу создать простую боковую навигацию, которая занимает всю высоту экрана. Я использую Milligram для моей базы, и я хочу, чтобы моя сторона-nav работала с ней. У меня есть следующие настройки:

Codepen demo

Как вы можете видеть, боковая панель является следующий элемент

<div class="sidebar"></div> со следующими стилями:

div.sidebar { 
    position: absolute; 
    width: 250px; 
    height: 100%; 
    z-index: 99; 
    background-color: black; 
} 

Этот вид работ, боковая панель появляется выше всего остального, но все остальное не попадает в сторону. И если экран небольшой, содержимое сталкивается с боковой панелью.

Как я могу сделать это, чтобы боковая панель толкала все остальное (включая навигационную панель) вправо на 250 пикселей (его ширина)? Я знаю, что это сделает вещи непригодными для использования на небольших экранах, но я дам пользователю способ переключить его.

Любая помощь приветствуется.

Answer 1

Вы можете установить левое поле с равным ширине боковой панели.

section .container { 
    margin-left: 250px; 
}