Hover box in bootstrap - width - html

Question

I am newbie in bootstrap and I have one problem.
<div class="container">
<div class="col-md-4 col-sm-6 col-xs-6">
<a href="">
<div class="box">
aaa
</div>
<div class="hover">
<div class="text">bbb</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-6">
<a href="">
<div class="box">
aaa
</div>
<div class="hover">
<div class="text">bbb</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-6">
<a href="">
<div class="box">
aaa
</div>
<div class="hover">
<div class="text">bbb</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-6">
<a href="">
<div class="box">
aaa
</div>
<div class="hover">
<div class="text">bbb</div>
</div>
</a>
</div>
</div>
.box {
background-color: red;
height: 60px;
}
.hover {
position: absolute;
top: 0;
background: none repeat scroll 0% 0% rgba(20, 245, 43, 0.5);
width: 100%;
}
FIDDLE: https://jsfiddle.net/ocqpsvvc
Why if I use "width: 100%" for div.hover then background is outside of tag a? Background for div.box is ok.
I don't want use width with pixels or modify % because I would have modify this for all responsive layouts.

Answer 1

You are not taking into account the 15px bootstrap default padding.
add width: calc(100% - 30px); to make up for the padding. the calc is saying, make the width 100% minus 30px for the 15px right and 15px left. this will solve your issue.
see fiddle: https://jsfiddle.net/DIRTY_SMITH/ocqpsvvc/5/

Answer 2

Your problem is with the bootstrap "col" elements.
By default, these have padding on them, you will need to remove the padding.
E.G.
<div class="col-md-4 col-sm-6 col-xs-6" style="padding:0;">
EDIT:
Or add another class to the element so that css can remove the padding which will be cleaner.
E.G.
<div class="col-md-4 col-sm-6 col-xs-6 removePad">
.removePad{padding:0;}