how do i sort out this css - html

Question

I have a code everything seem alright but the front end being rendered isn't. I have four boxes with a total width of 1000px and each box is 250px floated left, but the page when displayed shows the div as wider than 1000px, i don't know where the ish is, please find below the html code and css for that region:
<div class="strategy">
<div class="strat">
<p>To ensure our clients get the best results, we employ a strategy which takes time to create the best possible combination of ideas beyond just a random collection of texts and images.</p>
</div>
</div>
<div class="strategy">
<div class="design">
<h2>Design</h2>
<p>We plan and strategize your project through even before starting it. An evaluation meeting is scheduled with you to get a chance to understand what your requirements are. We analyze, review and discuss with you on various options for your project. This will guide our brainstorming, research and gathering of content for designing the best solution for you.
</p>
</div>
</div>
<div class="strategy">
<div class="develop">
<h2>Develop</h2>
<p>Based on the deliverables from the design step, we set to work harnessing our talents and appropriate technologies available to execute the project with focus on quality, cost and time. The client is carried along and kept in the loop at each stage for design approvals through our Online Project Sneak-Peek Platform (PSP Platform). This allows you to keep track of changes and updates into ensuring that the project, no matter how small or large, is a complete success.
</p>
</div>
</div>
<div class="strategy">
<div class="deploy">
<h2>Deploy</h2>
<p>Finally your project is ready for deployment. This is in two phases; first phase in which we deploy project for debugging and troubleshooting for errors and glitches. When this phase has been certified then we move to the second phase which is the final deployment of the project and handover.
</p>
</div>
</div>
<div class="clear"></div>
and the css for it is:
#about{
width:100%;
}
#about .about{
width:1000px;
margin:auto;
text-align:justify;
border-bottom:solid #000 1px;
padding:0 0 20px 0;
}
.about h1 {
width:1000px;
margin:auto;
text-align:left;
padding:50px 0;
font-size:40px;
font-weight:normal;
border-bottom:solid #000 1px;
}
.about h2 {
width:1000px;
margin:auto;
text-align:left;
padding:20px 0;
font-size:25px;
font-weight:normal;
}
.about p{
font-size:14px;
}
.about .strategy{
width:25%;
float:left;
text-align:left;
color:#fff;
}
.about .strat{
background:#33bbec;
padding:90px 20px 0 20px;
height:370px;
}
.about .design{
background:#5a5a5a;
padding:15px 20px;
height:430px;
}
.about .develop{
background:#4a4a4a;
padding:15px 20px;
height:430px;
}
.about .deploy{
background:#3e3e3e;
padding:15px 20px;
height:430px;
}

Answer 1

Why are you nesting your divs? And in your CSS you are styling the headers to be 1000px? Thats not right dude..your code is a mess...style the DIV CLASS ...not the headers...