Boxes messing up - html

Question

I am currently making a website for a college task and I am really confused on why the div I am trying to create is not appearing.
It doesn't seem to work since I added the code for the three boxes, they are meant to be the same width as the three boxes.
JsFiddle
<div id="wrapper">
<div id="top">
<div class="logo"> </div>
</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
</div>

Answer 1

You just need to add box-sizing property
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_three {
/*Other Style */
box-sizing:border-box;
}
Reference
Fiddle Demo

Answer 2

You Border-Width in each Box counts to the width.
Look at the Box-Model: http://www.w3schools.com/css/css_boxmodel.asp

Answer 3

Given what you said in the comments, a possible answer:
HTML at the bottom:
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
<div id="bigbox"></div>
CSS:
#bigbox {
width: 98%;
height: 300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
margin-top: 5%;
}
It seems to work for me. I can only get a solid line like you referred to if i leave the height out.

Answer 4

Its because css width only represents the content width. Total width is the combination of padding, margin and border.
Total Width=ContentWidth+Padding+Border+Margin
So giving width to 33% and some margin,padding and border is making it actually greater than 33%. Reduce the width size to achieve the desire results. Around 30 or 31% will be good.