How can I center the paragraph content within the .main-content div located to the right of the side navigation? When I apply margin: 0 auto, nothing happens. I believe my CSS is incorrect, but I'm unsure how to correct it. Additionally, I would like the white background of a clicked link to extend all the way to the left edge of the navigation div, as it currently does not reach.
$(document).ready(function(){
var navElement = $('.nav-el');
$('.content-area').hide();
navElement.find('a').on('click', function(e){
e.preventDefault();
navElement.find('.current').removeClass('current');
$(this).addClass('current');
$(this.hash).show().siblings().hide();
}).first().click();
});.hide {
display: none;
}
body {
}
.container {
position: relative;
}
#contentBox {
border: 1px solid grey;
width: 960px;
height: 1000px;
border-radius: 5px;
margin: 0 auto;
}
.side-nav {
position: relative;
float: left;
width: 250px;
background-color: green;
height: 100%;
}
.nav-el {
margin: 0;
}
.nav-el a {
text-decoration: none;
display: block;
padding: .5em 1em;
}
.nav-el a.current {
background: white;
color: orange;
}
.nav-el li {
list-style-type: none;
}
.main-content {
}
.content-area {
padding: 2em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>