Responsive Problem

ich hab ein kleines Problem mit Responsive Design! Ich möchte, dass mein Inhalt IMMER in der Mitte der Seite ist. Auf Desktop sollen es eine Reihe mit 4 Spalten sein, für Tablet 2 Reihen mit 2 Spalten und für Smartphone 4 Reihen in einer Spalte. Es funktioniert auch beides...aber leider nicht gleichzeitig (ich schätze mal es liegt an float:left; und display: flex; - leider finde ich dafür keine alternative). Vll. hat ja einer von euch eine Lösung für mein Problem.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<style>
.frame {
background: #FAFBFC;
display: flex; /*only way for center?*/
}
.inner-frame {
margin: 0 auto; /*only way for center?*/
margin-top: -10px;
}
@media only screen and (min-width: 800px) {
.frame{
display:flex;
}
.line{
display:flex;
}
}
@media only screen and (max-width: 300px) {
.frame{
display:flex;
flex-direction:column;
}
.line{
display:flex;
flex-direction:column;
}
}
@media only screen and (max-width: 799px) {
.frame{
display:flex;
flex-direction:column;
}
.line{
display:flex;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX