Элементы встроенного блока разбиваются на экранах различной ширины в зависимости от содержимого страницы.

Question

Итак, у меня есть две страницы, одна с div, содержащая заголовок и абзац, и одна с div, содержащим несколько div s, которые плавают влево. В верхней части обеих этих страниц у меня есть этот бит:

<div class="head">
        <div class="header">
            <div class="meniu">
                    <a href="index.html">
                         <div class="button">Acasa</div>
                    </a>
                    <a href="about.html">
                         <div class="button">Despre</div>
                    </a>
                    <a href="">
                         <div class="button">Contact</div>
                    </a>
                    <a href="">
                         <div class="button">Produse</div>
                    </a>
                    <div class="prod">
                                <a href="">
                                     <div class="button">Genti</div>
                                </a>
                                <a href="">
                                     <div class="button">Pantofi</div>
                                </a>
                                <a href="rochii.html">
                                     <div class="button">Rochii</div>
                                </a>
                        </div>
            </div>
        </div>
    </div>

И у меня есть это в файле css:

.button{
    display: inline-block;
    padding: 20px 50px;
}

И кнопки появляются рядом с каждой Другой. Когда я уменьшаю окно до определенного значения, последняя кнопка уходит ниже других строк. Моя проблема в том, что на первой странице это происходит на одной ширине, а на второй странице это происходит на другой ширине. Есть идеи, почему это так?

Вот фрагмент кода:

    .button{
        display: inline-block;
        padding: 20px 50px;
    }

    <div class="head">
            <div class="header">
                <div class="meniu">
                        <a href="index.html">
                             <div class="button">Acasa</div>
                        </a>
                        <a href="about.html">
                             <div class="button">Despre</div>
                        </a>
                        <a href="">
                             <div class="button">Contact</div>
                        </a>
                        <a href="">
                             <div class="button">Produse</div>
                        </a>
                        <div class="prod">
                                    <a href="">
                                         <div class="button">Genti</div>
                                    </a>
                                    <a href="">
                                         <div class="button">Pantofi</div>
                                    </a>
                                    <a href="rochii.html">
                                         <div class="button">Rochii</div>
                                    </a>
                            </div>
                </div>
            </div>
        </div>