Центрированный контент с боковой панелью (без заголовка)

Question

Я хочу использовать боковую панель в качестве навигации и иметь контент, ориентированный на экране пользователя. У меня была рабочая настройка с боковой панелью, и содержимое было сосредоточено между правой стороной боковой панели и правой стороной экрана, но это меня беспокоило. Как я могу иметь центрированный контент и боковую панель. Содержимое не должно находиться под боковой панелью или над ней. При изменении размера боковой панели также не может быть отключен от экрана. Не беспокойтесь о мобильных устройствах, поскольку я буду иметь дело с этим позже с рушительным меню. : P

Как вы можете видеть в кодефее, контент центрирован, однако он попадает под боковую панель. :(Я только что построил его как легкий запуск и визуальный, для тех, кто заинтересован в тонкой настройке кода.

Вот ссылка на мой Codepen.

Было бы очень полезно, если вы создаете codepen/Код jsfiddle с моего кода кодекса. Спасибо! :) Любая помощь очень ценится, и я благодарю вас заранее.

HTML:

<div class="site-header"> 

<ul class="main-navigation"><a href="#">Overview</a> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div> 
<div class="content">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 

CSS:

.content { 
    position: relative; 
    float: right; 
    border: 1px solid yellow; 
    word-wrap: break-word; 
    white-space: normal; 
    margin: auto; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
} 

.site-header { 
    padding: 1em; 
    display: inline-block; 
    top: 0; 
    left: 0; 
    right: 0; 
    width: 12%; 
    height: 100%; 
    float: left; 
    text-align: right; 
    position: fixed; 
    overflow: hidden; 
    z-index: 1; 
    border: 1px solid green; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    // background-color: blue; 
} 

.main-navigation { 
    position: absolute; 
    bottom: 40px; 
    right: 0; 
    cursor: default; 
    // border: 1px solid red; 
    list-style-type: none; 
    -webkit-margin-before: 0; 
    -webkit-margin-after: 0; 
    -webkit-margin-start: 0; 
    -webkit-margin-end: 0; 
    -webkit-padding-start: 0; 
} 

Answer 1

Вы можете установить процентное значение ширины на содержание что-то вроде 90, а ширину на 10% на боковой панели.

.content{ 
    border: 1px solid red; 
    width: 90%; 
} 
.site-header{ 
    width: 10%; 
    border: 1px solid green; 
} 

Вот jsfiddle, если я понимаю, чего вы хотите. https://jsfiddle.net/49t0kspp/

Answer 2

https://www.youtube.com/playlist?list=PLqGj3iMvMa4L731ispRfGAabXeRpM4RL6

контроль этот плейлист. Надеюсь, это поможет вам.