Div with columns overlaps elements while resizing - html

Question

Okay so i have a div with a container and 3 equal columns inside.Every column has a card with fixed height and width inside. However, below 1200px my design for a reason is breaking. What i mean is that when i resize to 1200px columns start to merge together and eventually in smaller sizes they tend to overlap the div and my footer. I know its complicated so here's some code.
----------HTML----------
<!-- 2nd card -->
<div class="col-md-4">
<div class="card">
<div class="cardoverlay">
</div>
</div>
</div>
<!-- 3rd card -->
<div class="col-md-4">
<div class="card">
<div class="cardoverlay">
</div>
</div>
</div>
</div>
</div>
</div>
-----------CSS-----------
.categories {
background-color: #e1e1e1;
height: 800px;
}
.card {
width: 353px;
height: 662px;
-webkit-border-radius: 5px/7px;
-moz-border-radius: 5px/7px;
border-radius: 8px/10px;
background-color: #fff;
-webkit-box-shadow: 0 2px #b8b3b3;
-moz-box-shadow: 0 2px #b8b3b3;
box-shadow: 3px #b8b3b3;
margin-top: 50px;
}
.cardoverlay {
width: 353px;
height: 202px;
-webkit-border-radius: 5px 5px 0 0/10px 10px 0 0;
-moz-border-radius: 5px 5px 0 0/10px 10px 0 0;
border-radius: 5px 5px 0 0/10px 10px 0 0 #f1f1f1;
background-color: #f9f9f9;
-webkit-box-shadow: 0 3px #f1f1f1;
-moz-box-shadow: 0 3px #f1f1f1;
box-shadow: 0 3px #f1f1f1;
The columns at this point are getting merged.
http://imgur.com/dEQzLjb
P.S i am using container instead of container-fluid so i can get the columns the one next to each other.

Answer 1

You are using a specific width rule, meaning the divs will always stay at those sizes. When the browser is re-sized smaller they will run over each other.
If you use a percentage based layout % this will not happen as they will scale relative to the container size.
.card, .cardoverlay {
width: 33%;
}