* { box-sizing: border-box; } .profile-pictures, .navigation-body ul li img { width: 50px; height: 50px; border-radius: 50%; } body { margin: 0; font-family: Arial, sans-serif; background-color: #FAFBFF; } .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; flex-direction: row; height: auto; } .navigation-body{ background-color: #FFFFFF; border: solid 1px #ECF0F5; width: 100%; border-radius: 20px; } .profile-header{ background-color: #FFFFFF; border: solid 1px #ECF0F5; width: 100%; border-radius: 20px; } .post-pics{ max-width: 500px; height: auto; } .posts-body { background-color: #FFFFFF; border: solid 1px #ECF0F5; width: 100%; border-radius: 20px; } .post-formular-body, .post{ background-color: #FFFFFF; border: solid 1px #ECF0F5; width: 100%; border-radius: 20px; } .all-posts-body{ background-color: #FFFFFF; border: solid 1px #ECF0F5; width: 100%; border-radius: 20px; } [class*="col-"] { padding: 15px; flex: 0 0 auto; box-sizing: border-box; } .col-1 { flex: 0 0 8.33%; max-width: 8.33%; } .col-2 { flex: 0 0 16.66%; max-width: 16.66%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.33%; max-width: 33.33%; } .col-5 { flex: 0 0 41.66%; max-width: 41.66%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.33%; max-width: 58.33%; } .col-8 { flex: 0 0 66.66%; max-width: 66.66%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.33%; max-width: 83.33%; } .col-11 { flex: 0 0 91.66%; max-width: 91.66%; } .col-12 { flex: 0 0 100%; max-width: 100%; } @media (max-width: 768px){ [class*="col-"] { max-width: 70%; } .container{ flex-wrap: wrap; } } @media (max-width: 456px){ [class*="col-"] { max-width: 90%; } .container{ flex-wrap: wrap; } }