何らかの理由で、コードのフッター部分の css が機能していません。フッターの背景を緑色にして、通常のコンテナーの外に配置したい。CSSは他のもののために働いています。誰もこれを経験したことがありますか？
これが私のコードです：
HTML:
<body>
<div class="wrapper">
<div class="header"></div><!--end header -->
<div id="content">
<div class="container">
<!--================== Navigation ===========================-->
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Programs</a>
</li>
<li>
<a href="#">Academics</a>
</li>
<li>
<a href="#">Research</a>
</li>
<li>
<a href="#">Alumni</a>
</li>
</ul>
</div>
</div>
<!--======================= Feature =====================-->
<div class="row">
<div class="col-lg-12">
<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0"
data-target="#myCarousel"></li>
<li data-slide-to="1" data-target=
"#myCarousel"></li>
<li data-slide-to="2" data-target=
"#myCarousel"></li>
</ol><!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
…
</div>
<div class="item">
…
</div>
<div class="item">
…
</div>
</div><!-- Carousel nav -->
<a class="carousel-control left" data-slide="prev"
href="#myCarousel">‹</a> <a class=
"carousel-control right" data-slide="next" href=
"#myCarousel">›</a>
</div>
</div>
</div>
<!--======================= About =======================-->
<div class="row">
<div class="col-lg-8">
<div id="about">
<h2>About the DPO</h2>
</div>
<div class="col-lg-6">
<div class="dpo-about">
<p><br>
Since its inception in 1968, the Diversity
Programs Office (DPO) has positively impacted
the academic, professional and personal growth
of tens of thousands of underrepresented
minority students through a range of
programs.</p>
</div>
</div>
</div>
<!--=================== Meet the Staff ==================-->
<div class="col-lg-4">
<div id="staff">
<h2>Meet the Staff</h2>
</div>
<!--=================Thumbnails==================-->
<div class="row-fluid">
<div class="thumbnails" style="margin-left: 2em">
<div class="staff">
<ol>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/theodorecaldwell-75x75.jpg"
style=
"width: 50px; height: 50px;"></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/kylefoster-75x75.jpg"
style=
"width: 50px; height: 50px;"></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/tonishalane-75x75.jpg"
style=
"width: 50px; height: 50px;"></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/maggieramsey-75x75.jpg"
style=
"width: 50px; height: 50px;" /></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/rickeycaldwell-75x75.jpg"
style=
"width: 50px; height: 50px;"></a>
</li>
</div>
<div class="staff-image">
<li>
<a class="thumbnail" href=
"#"><img alt="50x50" data-src=
"holder.js/50x50" src=
"images/thumbnails/placeholder-75x75.jpg"
style=
"width: 50px; height: 50px;" /></a>
</li>
</div>
</ol>
</div>
</div>
</div>
<!--=================end Thumbnails==============-->
</div>
</div>
<!--======================= News ========================-->
<div class="row">
<div class="col-lg-8">
<div id="news">
<h2>News and Announcements</h2>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 100px; height: 80px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Cras sit amet nibh libero, in gravida
nulla. Nulla vel metus scelerisque.
</div><a class="btn-news" href="#">Read
More</a>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 100px; height: 80px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Cras sit amet nibh libero, in gravida
nulla. Nulla vel metus scelerisque.
</div><a class="btn-news" href="#">Read
More</a>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 100px; height: 80px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Cras sit amet nibh libero, in gravida
nulla. Nulla vel metus scelerisque.
</div><a class="btn-news" href="#">Read
More</a>
</div>
</div>
<!--================End News Items==================-->
</div>
<!--======================= Events ======================-->
<div class="col-lg-4">
<div id="events">
<h2>Events</h2>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 70px; height: 50px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Date Time
</div>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 70px; height: 50px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Date Time
</div>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 70px; height: 50px;" /></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Date Time
</div>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img alt="64x64"
class="media-object" data-src="holder.js/64x64"
src="images/thumbnails/news%20placeholder.jpg"
style="width: 70px; height: 50px;"></a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div class="media-news">
Date Time
</div>
</div>
</div>
</div>
</div>
<!--==================== Highlights =====================-->
<div class="row">
<div class="col-lg-8">
<div id="highlights">
<h2>Highlights</h2>
</div>
</div>
<!--======================= Showcase ====================-->
<div class="col-lg-4">
<div id="showcase">
<h2>Showcase</h2>
</div>
</div>
</div>
</div><!--end content -->
<!--======================= Footer ====================-->
<div class="footer">
<!-- copyrights region -->
<div class="container">
<div class="copyrights-wrapper" id="copyrights-wrapper">
<div id="footer-msu-logo">
<a href="http://www.msu.edu">Michigan State
University</a>
</div><!-- footer-msu-logo -->
<div id="footer-copyrights">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>
</div>
</div><!--end #footer -->
</div>
</div>
CSS
#wrapper{
border: 1px solid black;
width: 600px;
margin-left: auto;
margin-right: auto;
position: relative; //make #wrapper position non-static
min-height: 99%;
}
/*body {background-color:#000;}*/
h2 {
padding: 10px;
font:"Times New Roman", Times, serif;
color:#FFF}
.container
{
background-color:#FFF;
padding-bottom: 5px;
}
.headerwrapper{
background-color:#000;
width:100%;
border:inset;
border-color:#FFF;
}
ul.thumbnails li {
display: inline-block;
}
.staff-image {
margin: 2px;
display: inline-block;
list-style-type:none;
}
.staff {
margin-top: 10px;
margin-left: -15px;
}
.nav a{
color:#FFF;
padding: 5px;
}
.nav {
width:100%;
background-color: #000;
border:solid;
border-color:#FFF;
}
.news-body {
}
.media {
margin-left: 13px;
}
.media-heading {
color: #03F;
}
.media-news {
font-size: 12px;
}
.media {
padding-bottom: 5px;
border-bottom: solid;
border-bottom-width: thin;
border-color: #CCC;
}
#about {
margin-top:5px;
background-color:#000;
}
#staff {
margin-top:5px;
background-color:#000;
}
#news {
margin-top:5px;
background-color:#000;
}
#events {
margin-top: 5px;
background-color:#000;
}
#highlights {
margin-top:5px;
background-color:#000;
}
#showcase {
margin-top:5px;
background-color:#000;
}
.dpo-about {
margin-left: 13px;
}
.btn-news {
background-image: 0 0 60%;
background-image: 0 0 60%;
background-image: 0 0 60%;
background-image: 0 0 60%;
background-image: linear-gradient(top,rgba(230,230,230,1) 0 60%;
-webkit-box-shadow: 0 0 2px 0 rgba(0,0,0,1);
-moz-box-shadow: 0 0 2px 0 rgba(0,0,0,1);
box-shadow: 0 0 2px 0 rgba(0,0,0,1);
border: solid 1px rgba(102,102,102,1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 65px;
display: inline-block;
font-size: 10px;
line-height: 13px;
text-indent: -2px;
text-align: center;
color: rgba(120,120,120,1);
font-weight: 700;
margin-left: 210px;
}
.btn-news:hover {
text-decoration: none;
}
.btn-news:active {
}
/* Footer */
.footer{
height: 50px;
background-color: #174137;
text-align: center;
}
.copyrights-wrapper {
background-color:#174137;
}