Знакомство с таблицами / Испытание: итоговая таблица [23/23]

Курсы §5. Знакомство с таблицами
1 
Почему размер отличается?
HTML:
<head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
</head>
<body>
    <h1>Итоговая таблица</h1>
    <table>
    <tr>
    <th class="cyan1">Город</th>
    <th class="blue">Посещений</th>
    <th class="cyan2">%</th>
    </tr>
    <tr class="white">
    <td class="column-1">СПб</td>
    <td class="column-2">199</td>
    <td class="column-3">65.12</td>
    </tr>
    <tr class="yellow">
    <td class="column-1">Москва</td>
    <td class="column-2">69</td>
    <td  class="column-3">21.3</td>
    </tr>
    <tr  class="white">
    <td class="column-1">Киев</td>
    <td class="column-2">5</td>
    <td  class="column-3">8</td>
    </tr>
    <tr class="yellow">
    <td colspan="2" class="column-1">Посещений за весь период</td>
    <td  class="column-3">273</td>
    </tr>
    </table>
</body>

CSS:
body {
width: 350px;
margin: 0;
padding: 0 10px;
font-size: 14px;
font-family: Arial, sans-serif;
}

table {

}

td {
padding: 10px;
border-bottom: 1px solid lightgray;
}

th {
padding: 10px;
color: white;
width: 33%;
}

.white {
background-color: white;
}

.yellow {
background-color: lightyellow;
}

.blue {
background-color: lightblue;
}

.cyan1 {
background-color: darkcyan;
text-align: left;
}

.cyan2 {
background-color: darkcyan;
text-align: right;
}

.column-1 {
text-align: left;
}

.column-2 {
text-align: center;
}

.column-3 {
text-align: right;
}

sreenshot:

29
Screenshot 2017-12-27 12.07.29.png1920×1080 172 KB

2

Что-то тут не так, а вы как думаете?

3

Спасибо