align divs using css and HTML


I am trying to line up 4 divs inline using CSS and also make them responsive.

I tried this css

.col {
  border:1px solid black;
  margin:5px 5px 5px 5px;

@media only screen and (max-width: 800px) {
  .col {

@media only screen and (max-width: 500px) {
  .col {

But as the screen gets smaller, they are slightly different sizes

I created a fiddle of my code:

I am trying to make it like:

I have made a modification to Abhitalks' fiddle. I've removed the padding:0; and margin:0; from everything, as I don't see this as necessary. If you're setting your container div to 100% width, all your other dimension and margin units need to be %'s as well.

the key is to subtract 2% from the width of your .col's to allow for the margin that will 'touch' the padding of your container div.

.col {
   border: 1px solid black;
   width: 23%; display: inline-block;
   padding: 2%; margin: 1%;
   text-align: left;
   font-size: 16px;

You may need a media query when the .col's get very small on a narrow screen.