#services div has content but appears as empty div - html

Question

My #services div has content wrapped inside, but when I wanna give display it's borders or give it a background, it appears as an empty div. What's the trick here? Looks like it works well in the snippet, but here is the way it appears: http://laszlovaszi.com/yoursite/ .Thanks in advance!
#services {
border:1px solid red;
margin-top:50px;
background-color:#f1eee9;
}
#services p {
margin-top:25px;
}
.separator2 {
width: 100%;
margin: 20px auto 15px;
position: relative;
height: 1px;
background-color:#d3d3d3;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="services">
<div class="col-sm-8 col-sm-offset-2 text-center">
<div class="row">
<h1>Our Team</h1>
<div class="separator2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</row>
</div>
</div>

Answer 1

After correcting your markup (amending the </row> tag to a </div>), I noticed your wrapping #services div appears to be collapsing due to its floated children. Add a clearfix class to it as below:
#services {
border:1px solid red;
margin-top:50px;
background-color:#f1eee9;
}
#services p {
margin-top:25px;
}
.separator2 {
width: 100%;
margin: 20px auto 15px;
position: relative;
height: 1px;
background-color:#d3d3d3;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="services" class="cf">
<div class="col-sm-8 col-sm-offset-2 text-center">
<div class="row">
<h1>Our Team</h1>
<div class="separator2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
You'll notice now, the #services div has its height reinstated (before it just had a 2px height due to the border).
Clearfix micro hack: http://nicolasgallagher.com/micro-clearfix-hack/
More info: What is a clearfix?

Answer 2

You need to use float property to achieve so
#services {
border:1px solid red;
margin-top:50px;
background-color:#f1eee9;
float:left;
width:100%:
}
Also you can add width attribute if you want to.