excer.css

h1, h4, h3, h2, p {
    
    text-align: center;
} 

h1{
    color: chartreuse;
    text-align: center;
    margin: 30px;
}
/*
.header{
    height: 100px;
    width: 100%;
    display: block;
    text-align: center;
}
*/
body{
    background-color: slategrey;
}

.row {
    
    display: flex;
    width: 100%;
    background-color: gainsboro;
}


.row::after {
    
    display: block;
    clear: both;
    content: "";
}
.col-1 { width: 8.33%;}
.col-2 { width: 16.66%;}
.col-3 { width: 25%;}
.col-4 { width: 33.33%;}
.col-5 { width: 41.66%;}
.col-6 { width: 50%;}
.col-7 { width: 58.33%;}
.col-8 { width: 66.66%;}
.col-9 { width: 75%;}
.col-10 { width: 83.33%;}
.col-11 { width: 91.66%;}
.col-12 { width: 100%;}


*{
    
    box-sizing: border-box;
}

[class*="col-"]{
    
    border: 2px solid red;
    padding: 10px;
}
img{
    
    max-width: 100%;
    display: block;
    margin: auto;
    
}


@media screen and (max-width: 785px)
{
       
    .col-6 {
        width: 100%;
        margin: 0;
    }
}