* {
    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;
    }
  }