Issue with DIV positions - html

Question

would you know why my red div (.block) is placed above the blue wrapper and not within? Also would expect the text to be within the red DIV as well. Thanks http://jsfiddle.net/B3CL6/
HTML:
<div class="wrapper blue-background ">
<div class="block width100">
<div class="block-left">
<h3>Block left </h3>
</div>
<!-- End DIV block-left -->
<div class="block-right">
<h1>block right</h1>
</div>
<!-- End DIV block-right -->
</div>
<!-- End DIV block width100 -->
</div>
<!-- End wrapper -->
CSS:
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
overflow: hidden;
}
.block {
padding: 20px;
text-align: justify;
background-clip: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
background: red;
}
.width100 {
width: 100%;
}
.top {
margin-top: 30px;
}
.blue-background {
background: #124191;
}
.block-left {
float: left;
box-sizing: border-box;
width: 50%;
}
.block-right {
float: right;
overflow: hidden;
box-sizing: border-box;
width: 50%;
}

Answer 1

As far as i understand is you want the Red Block inside the Blue Block. if so
try this. set the padding-top:10px to Padding:10px
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
overflow: hidden;
padding: 10px;
}
and if you want the text inside that do something like this or add another style for the "Block Right" text
H1{
display: inline;
}

Answer 2

Red div(.block) is actually present inside Blue div(.wrapper). As suggested by JoshC you can check it by making your red background as semi-transparent.
To get the text to be within the red DIV,
Remove overflow: hidden; property from .wrapper class and add it to .block class.
That should solve your problem.