DIV stuck to the left of page - html

Question

I have created a fixed menu to the left of the page, and now I am wanting to create a “content” area to the right by setting values of left and right CSS values, however the content won’t adjust accordingly.
JSFiddle
body {
margin: 0px;
background-image: url(_assets/bg_2.png);
background-position: center;
background-repeat: repeat;
height: 300%;
}
#font-face {
src: url("_assets/Socialico.ttf");
font-family: nav-social-1;
}
#font-face {
src: url("_assets/Socialico Plus.ttf");
font-family: nav-social-2;
}
#font-face {
src: url("_assets/Century Gothic.ttf");
font-family: nav-item;
}
/*-----------------MENU CLASSES-----------------*/
.menu-gap {
height: 25px;
width: 100%;
}
.sidebar-menu {
position: fixed;
height: 100%;
top: 0px;
left: 0px;
width: 250px;
background-color: rgba(255, 255, 255, 0.75);
}
.logo {
margin: 0px;
width: 100%;
height: auto;
background-color: transparent;
}
.logo-item {
width: 75%;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-image 0.25s;
}
.logo-item {
content: url(_assets/logo_up.png);
}
.logo-item:hover {
content: url(_assets/logo_over_2.png);
}
.nav-gap {
width: 22%;
height: 50px;
float: right;
}
.nav-menu {
margin: 0px;
width: 100%;
height: 375px;
background-color: transparent;
}
.nav-item {
margin: 0px;
width: 100%;
float: right;
text-align: right;
height: 75px;
line-height: 75px;
font-size: 14px;
text-shadow: 0.5px 0.5px 1px #c8c8c8;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: transparent;
-webkit-transition: color 0.35s;
-moz-transition: color 0.35s;
-o-transition: color 0.35s;
transition: color 0.35s;
}
.nav-item {
color: #555;
}
.nav-item:hover {
color: #b9a069;
}
.soc-menu {
height: 50px;
width: 100%;
background-color: transparent;
}
.soc-item {
margin: 0px;
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
-o-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.soc-item {
content: url(_assets/instagram_up.png);
}
.soc-item:hover {
content: url(_assets/instagram_over_2.png);
}
.copyright-menu {
height: auto;
margin: auto 0;
bottom: 0px;
width: 100%;
background-color: transparent;
}
.copyright-item {
width: 100%;
height: 55px;
line-height: 10px;
font-size: 10px;
text-align: center;
color: #999;
font-family: nav-item;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
/*-----------------MENU CLASSES-----------------*/
/*-----------------CONTENT CLASSES-----------------*/
.content-wrapper {
left: 350px;
right: 50px;
height: auto;
background-color: rgba(255, 255, 255, 0.5);
}
.header {
width: 100%;
height: 50px;
margin-top: 200px;
margin-bottom: 100px;
}
/*-----------------CONTENT CLASSES-----------------*/
<div class="sidebar-menu">
<div class="menu-gap">
<br />
</div>
<div class="logo">
<a href="http://www.stephanieengland.com/">
<div class="logo-item"></div>
</a>
</div>
<div class="menu-gap">
<br />
<br />
<br />
<br />
</div>
<div class="nav-menu">
<a href="http://www.stephanieengland.com/about-me">
<div class="nav-item">About Me
<div class="nav-gap"></div>
</div>
</a>
<a href="http://www.stephanieengland.com/costumes">
<div class="nav-item">Costumes
<div class="nav-gap"></div>
</div>
</a>
<a href="http://www.stephanieengland.com/personal-works">
<div class="nav-item">Personal Works
<div class="nav-gap"></div>
</div>
</a>
<a href="http://www.stephanieengland.com/professional-credits">
<div class="nav-item">Professional Credits
<div class="nav-gap"></div>
</div>
</a>
<a href="http://www.stephanieengland.com/contact">
<div class="nav-item">Contact
<div class="nav-gap"></div>
</div>
</a>
</div>
<div class="menu-gap">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="soc-menu">
<a href="instagram">
<div class="soc-item"></div>
</a>
</div>
<div class="menu-gap">
<br />
</div>
<div class="copyright-menu">
<a href="#">
<div class="copyright-item">
<br />
<br />Stephanie England
<br />© Copyright 2016</div>
</a>
</div>
<div class="menu-gap">
<br />
</div>
</div>
<!-----------------MENU END----------------->
<!-----------------CONTENT START----------------->
<div class="content-wrapper">
<div class="header">
<div class="header-text">Contact Header Here Not Yet Set</div>
</div>
</div>
<!-----------------CONTENT END----------------->
<!-----------------FOOTER START----------------->
<div class="footer">
<div class="soc-footer">
<div class="soc-footer-item"></div>
</div>
</div>
<!-----------------FOOTER END----------------->

Answer 1

Giving the .sidebar-menu div a position of fixed takes it out of the flow of the document. So Your .content=wrapper div ignores it and positions itself flush to the left of the viewport. You can give it a margin-left of 250px:
.content-wrapper{
margin-left:250px;
}
To compensate for this, but if you just want your menu to stick to the left of the viewport, I would suggest floating it (and your content wrapper) instead.
https://jsfiddle.net/8rcws951/