Centered Content w/Seitenleiste (keine Überschrift)

Question

Ich möchte eine Sidebar als Navigation verwenden und den Inhalt auf dem Benutzerbildschirm zentriert haben. Ich hatte ein funktionierendes Setup mit einer Seitenleiste und der Inhalt befand sich zwischen der rechten Seite der Seitenleiste und der rechten Seite des Bildschirms, aber es störte mich. Wie kann ich einen zentrierten Inhalt und eine Seitenleiste haben? Der Inhalt darf nicht unter oder über die Seitenleiste hinausgehen können. Die Seitenleiste kann auch nicht vom Bildschirm verschoben werden, wenn der Inhalt geändert wird. Mach dir keine Sorgen über Mobile, da ich später mit einem kollabierenden Menü darauf eingehen werde. : P

Wie Sie im Codepen sehen können, ist der Inhalt zentriert, aber es geht unter der Seitenleiste. :(Ich baute es nur als einen einfachen Start und visuelle, für jeden, der in zwicken den Code interessiert ist.

Hier ein Link zu meinem Codepen ist.

Es wäre wirklich hilfreich, wenn Sie Ihre codepen Basis/jsfiddle Code von meinem Codepen Code. Danke! :) Jede Hilfe wird sehr geschätzt, und ich danke Ihnen im Voraus.

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

Sie eine prozentuale Breite auf den Inhalt von so etwas wie 90, und 10% Breite auf der Seitenleiste festlegen. Hier

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

ist ein jsfiddle wenn ich verstehe, was Sie wollen. https://jsfiddle.net/49t0kspp/

Answer 2

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

Kasse Diese Playlist. Ich hoffe, dass dir das weiterhilft.