Undesired Column Layout HTML/CSS
1
I have a CSS layout problem. In the Portfolio section of my site @ 763px breakpoint I want 3 rows with 2 columns in each of them. I have that. [.col] [.col] [.col] [.col] [.col] [.col] But from 926px - 978px my columns break up and then i get 4 rows like this: [.col] [.col] [.col] [.col] [.col] [.col] Why is this happening? And what is the solution? Thank you.
main {
margin: 55px 0px -30px 0px;
background: linear-gradient(transparent, rgba(102, 194, 255, 0.4) 10%, transparent 99%);
padding-bottom: 5rem;
}
h2 {
text-align: center;
margin: 5rem 0;
font-size: 1.6rem;
}
h3 {
color: #353535;
font-size: 1.3rem;
margin: 1.2rem 0;
}
.col {
width: 100%;
text-align: center;
margin-bottom: 15px;
}