How come my media query is not working? - css

Question

I am trying to have my website 'responsive'. I have 2 columns and am trying to have them stack on each other when below 992px. This is the code I have for the columns and the code for the media query. Whenever I go below the 992px, col1 stays at 69% and col2 at 29% but both are floating left and stacked on top of each other. I am just wondering what I am doing wrong because I want them to take up the width of the screen when below 992px. Is the code for col1 and col2 overriding the #media? I have tried the #media with display: inline and display: block but neither worked. Sorry if it is messy, I only started learning last friday :)
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98%;
}
.col2 {
width: 98%;
}
}
.col1 {
margin: auto;
float: left;
width: 69%;
background-color: #686472;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
}
.col2 {
margin: auto;
float: left;
width: 29%;
background-color: #454349;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
padding-bottom: 39px;
}

Answer 1

.col1 {
margin: auto;
float: left;
width: 69%;
background-color: #686472;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
}
.col2 {
margin: auto;
float: left;
width: 29%;
background-color: #454349;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
padding-bottom: 39px;
}
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98%;
}
.col2 {
width: 98%;
}
}
Ideally though, you would create two more media queries, one with a max-width: 768px, and one with a min-width: 991px. This way you would account for the space above and below, and put all your numbers there so there are no conflicts.
Essentially what's happening is that anything that is outside of the media query applies to all widths. A simple, unorthodox solution to this problem would be to add '!important' to the rules inside media queries, without the need to change order.
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98% !important;
}
.col2 {
width: 98% !important;
}
}
However, the use of '!important' can become highly problematic in large stylesheets where conflicts may occur and hair begins to get pulled off, use it wisely.