CSS Issues

When I first set this page up, I was only HTML code and everything looked great. I’ve recently started messing around with responsive css. Ever since I set my css I’ve gotten these huge gaps underneath the boxes on the right, and my gaps between the boxes have disappeared? I’m not sure what I’m doing wrong here. It looked fine before I entered the css, so I know there’s something I’m missing with the css. I’ve tried border-spacing, padding, margins, etc. Nothing puts a space between the boxes left to right, and nothing I have tried gets rid of that huge gap between the top boxes on the right and the bottom boxes on the right?
This is the structure I want the page to have. For some reason it looks fine until I add the responsive code. https://citylightschurch-abq.com/test-page
Any help would be appreciated. I’m not sure what I’m missing,
Copy of my css.

.video {
float: left;
border-width: 1;
border-style: double;
border-color: grey;
margin-right: .25%;
margin-top: .25%;
margin-bottom: .25%;
text-shadow: 3px 3px 3px #000000;
background-image: url(“https://citylightschurch-abq.com/wp-content/uploads/2016/08/005-wood-melamine-subttle-pattern-background-pat.jpg”) }
.audio1 {
float: left;
border-width: 1;
border-style: double;
border-color: grey;
margin-right: .25%;
margin-left: 0%;
margin-top: .25%;
margin-bottom: .25%;
background-image: url(“https://citylightschurch-abq.com/wp-content/uploads/2016/08/005-wood-melamine-subttle-pattern-background-pat.jpg”) }
.audio2 {
float: left;
border-width: 1;
border-style: double;
border-color: grey;
margin-right: .25%;
margin-left: 0%;
margin-top: .25%;
margin-bottom: .25%;
background-image: url(“https://citylightschurch-abq.com/wp-content/uploads/2016/08/005-wood-melamine-subttle-pattern-background-pat.jpg”) }
.audio3 {
float: left;
border-width: 1;
border-style: double;
border-color: grey;
margin-right: .25%;
margin-left: 0%;
margin-top: .25%;
margin-bottom: .25%;
background-image: url(“https://citylightschurch-abq.com/wp-content/uploads/2016/08/005-wood-melamine-subttle-pattern-background-pat.jpg”) }
.audio4 {
float: left;
border-width: 1;
border-style: double;
border-color: grey;
margin-right: .25%;
margin-left: 0%;
margin-top: .25%;
margin-bottom: .25%;
background-image: url(“https://citylightschurch-abq.com/wp-content/uploads/2016/08/005-wood-melamine-subttle-pattern-background-pat.jpg”) }
/* For mobile phones: */ [class*=”col-“] {
width: 100%;
}
@media only screen and (min-width: 430px) and (max-width: 604px) {
/* For tablets: */ .col-m-1 {
width: 98.60%;
height: 1080px;
}
.col-m-2 {
width: 48.47%;
height: 655px;
}
}
@media only screen and (min-width: 604px) and (max-width: 800px) {
/* For tablets: */ .col-t-1 {
width: 98.60%;
height: 1165px;
}
.col-t-2 {
width: 48.47%;
height: 650px;
}
}
@media only screen and (min-width: 800px) and (max-width: 1024px) {
/* For tablets: */ .col-a-1 {
width: 98.60%;
height: 1300px;
}
.col-a-2 {
width: 48.80%;
height: 600px;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
/* For tablets: */ .col-b-1 {
width: 47.50%;
height: 1251px;
}
.col-b-2 {
width: 24.50%;
height: 620px;
}
}
@media only screen and (min-width: 1366px) {
/* For desktop: */ .col-1 {
width: 24.75%;
height: 568.75px;
}
.col-2 {
width: 47.80%;
margin-left: .25%;
height: 1148.75px;
}
}

The page I need help with: [log in to see the link]