Почему мой div позиционируется странно? ⇐ Html

[Anonymous]

На моем компьютере мой веб-сайт отображается так:


На моем телефоне это выглядит так:


Как мне сделать так, чтобы на моем телефоне они располагались только по одному в строке и не сильно сжимались друг с другом

Код: Выделить всё

#boxes {
margin-top: 20px;
}

#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
margin-right: 30px;
background: #FFF;
-webkit-box-shadow: 0 1px 5px #ccc;
-moz-box-shadow: 0 1px 5px #ccc;
-ms-box-shadow: 0 1px 5px #ccc;
-o-box-shadow: 0 1px 5px #ccc;
box-shadow: 0 1px 5px #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}

.container {
width: 95%;
margin: auto;
overflow: hidden
}

Код: Выделить всё

GROWING COMMUNITY

Info about the community

[img]86118e7a6a88f4cfd90d2c95aae8137a.png[/img]
CUSTOM SCRIPTS

Our developers, [REDACTED] and [REDACTED] are working to get custom scripts that no other community has into the server!

[img]download_1_380x152.jpg[/img]
REALISTIC ROLEPLAY

Info about the community

По моему опыту, HTML автоматически сделает это за меня. Я делаю что-то не так?

Подробнее здесь: https://stackoverflow.com/questions/528 ... lf-weirdly