Having a bit of trouble with this layout - while everything looks good, the page extends to the right with just a blank space. I've tried everything but nothing seems to work.
.container.open-sidebar {
position: relative;
left: 240px;
}
#sidebar ul li a {
padding: 15px 20px;
height: 100%;
font-size: 16px;
font-weight: 100;
color: white;
background: #1a1a1a;
text-decoration: none;
display: block;
border-bottom: 1px solid #1a1a1a;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
HTML:
<div class="container open-sidebar">
<div id="sidebar">
content
</div>
</div>
This is causing the issue. The first div pushes everything to the right and creates a blank space on the right side.
Any suggestions on how to fix this? Thanks!