Responsive divs with different percent widths and margin - html

Question

I'm working on a responsive template but I have a problem with the widths of my divs and they are all the same size, but they should not be, look at the code snippet. I tried some things but they all don't work :/
Html:
<div class="content">
<div class="col 4">
<div class="top">
<h4>Top</h4>
</div>
<div class="con">
<p class="inner">Content</p>
</div>
</div>
<div class="col 3">
<div class="top">
<h4>Top</h4>
</div>
<div class="con">
<p class="inner">Content</p>
</div>
</div>
<div class="col 3">
<div class="top">
<h4>Top</h4>
</div>
<div class="con">
<p class="inner">Content</p>
</div>
</div>
<div class="col 3">
<div class="top">
<h4>Top</h4>
</div>
<div class="con">
<p class="inner">Content</p>
</div>
</div>
</div>
CSS:
.content {
width: auto;
height: auto;
padding: 10px;
}
.col {
box-shadow: 0 0 3px #bdc3c7;
margin: 5px;
}
.col .4 {
width: 100%;
float: left;
}
.col .3 {
width: 33.33333%;
float: left;
}
.col .2 {
width: 50%;
float: left;
}
.col .1 {
width: 25%;
float: left;
}
.col .top {
height: 40px;
line-height: 40px;
width: 100%;
background: #3498db;
}
.col .top h4 {
padding: 0 10px;
color: #fff;
}
.col .con {
width: 100%;
}
.inner {
padding: 10px;
}

Answer 1

You should change your class names to something like "col-1", "col-2" ... Check this post
Also, your selectors are wrong. With this:
.col .col-1 {}
You are trying to access all the element with "col-1" class inside elements with class "col".
You should be doing:
.col.col-1 {}
To get the elements containing both classes.

Answer 2

This:
.col .4 {
width: 100%;
float: left;
}
.col .3 {
width: 33.33333%;
float: left;
}
.col .2 {
width: 50%;
float: left;
}
.col .1 {
width: 25%;
float: left;
}
Should be this:
.col-4 {
width: 100%;
float: left;
}
.col-3 {
width: 33.33333%;
float: left;
}
.col-2 {
width: 50%;
float: left;
}
.col-1 {
width: 25%;
float: left;
}
or this, which means all col classes that also has another numeric class:
.col.col-4 {
width: 100%;
float: left;
}
.col.col-3 {
width: 33.33333%;
float: left;
}
.col.col-2 {
width: 50%;
float: left;
}
.col.col-1 {
width: 25%;
float: left;
}
Since they're not nested inside the col class. As having classes that starts with a number isn't allowed.