Я пытаюсь создать боковую панель для одного из моих представлений в ASP.NET.
Я близок к завершению, но я получаю пустое пространство слева от моей боковой панели, в результате чего ширина становится более 100% (обратите внимание на полосу прокрутки) 
Это когда полоса прокрутки открыта:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Profile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="~/Content/profilePageSheet.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="#">Profile</a></li>
<li><a href="#">Job experience</a></li>
<li><a href="#">Profile details</a></li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-success" id="menu-toggle">Menu</a>
<h1>Profile</h1>
<p>
Lorem ipsum dolor...
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Menu toggle script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
</script>
CSS
#wrapper {
float:left;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
/* Sidebar */
#sidebar-wrapper {
z-index: 1;
position: absolute;
width: 0;
height: 100%;
overflow-y: hidden;
background: #2C3E50;
border: 2px solid red;
opacity: 0.9;
transition: .5s ease-out;
}
/* Always take up entire screen */
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
border: 5px solid blue;
transition: .5s ease-out;
}
/* Change with of sidebar from 0 to 250px */
.menuDisplayed #sidebar-wrapper {
width: 250px;
}
/* Since we added left padding, we need to shrink the width by 250px */
.menuDisplayed #page-content-wrapper {
padding-left: 250px;
}
/* Sidebar styling - the entire ul list */
.sidebar-nav {
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li a:hover {
background: #afaeae;
}
Я также пытался добавить это в мою таблицу стилей:
#wrapper {
float:left;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
Мне кажется, это вопрос стиля. Поскольку я работаю в Visual Studio ASP.NET, знаете ли вы, что автоматически созданный CSS-файл может помешать?