body { 

      margin: 0;
      padding: 0;
      font-family: "Times new Roman";
      background-color: #314960;
}

.wrapper {
      padding: 5px;
      max-width: 860px;
      width; 95%;
      margin: 20px auto;
}     
header {
      padding: 0 15px;
      text-align: center;
      font-size: 21px;
}
.columns {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      margin: 5px 0;
}
.column { 
      flex: 1;
      border: 1px solid #666;
      margin: 2px;
      padding: 10px;
      background: #7f95d1;
      transition: 0.13s;
}
.column:first-child {
      margin-left: 0;
      background: #7f95d1;
}
.column:last-child {
      margin-left: 0;
      background: #7f95d1;
}
@media screen and (max-width: 880px) {
      .columns .column {
        margin-bottom: 5px;
        flex-basis: 40%;
}
.columns .column:last-child {
        flex-basis: 100%;
        margin: 0;
}
.columns .column:nth-last-child(2) {
        margin-right: 0; 
}
}
@media screen and (max-width: 580px) {
       .columns .column {
        flex-basis: 100%;
        margin: 0 0 5px 0;
}

 }