* {
    margin: 0;
    padding: 0;
    box-sizing: auto;
    font-weight: normal;
}

body {
    font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
}

.page-wrapper {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    margin-top: 15px;
}

table {
    margin: 0px auto;
    width: 40%;
    min-width: 250px;
    border-collapse: collapse;
}

td,
th {
    border: 1px solid #ffffff;
    padding: 15px;
}

th {
    background-color: cornflowerblue;
    color: #fff
}

td {
    background-color: rgb(166, 192, 241);
}

th:nth-child(1) {
    text-align: left;
}

tr>td:nth-child(1) {
    width: 30%;
    background-color: cornflowerblue;
    color: #fff;
}

tr>td:not(:nth-child(1)) {
    text-align: center;
}

.table-wrapper * {
    box-sizing: border-box;
}

.table-wrapper {
    margin: 0 auto;
    width: 40%;
    min-width: 250px;
}

.data {
    float: left;
    background-color: rgb(166, 192, 241);
    border: #fff solid 1px;
    padding: 15px;
}

.row>.data:nth-child(1) {
    width: 30%;
}

.row>.data:not(:nth-child(1)) {
    width: calc(70%/4);
    text-align: center;
}

.header div {
    text-align: center;
    color: #fff;
    background-color: cornflowerblue;
}

.header div:nth-child(1) {
    text-align: left;
}

.row .data:nth-child(1) {
    color: #fff;
    background-color: cornflowerblue;
}