Źle skalujące się menu

Witam,

Tworzę obecnie stronę internetową. Dopiero co zaczynam w temacie CSS, jednak całą stronę mam już gotową. Problem w tym, że chociaż strona dobrze wyświetla się w rozdzielczości 1600x900, to jednak w innych rozdzielczościach górne menu dzieli się na dwie części. Chciałbym aby menu się zmniejszało, a nie, jak teraz dzieliło na części. W załączniku cały folder ze stroną.

2.zip

w styl.css poniżej deklaracji klasy ‘strona’, wyrzuć całą zawartość i dopisz:

.menu ul{
	width: 100%;
	font-size: 0;
	margin: 0;
	padding: 0;
}
.menu ul li {
	display: inline-block;
	width: 25%;
}
.menu ul a{
    text-decoration: none;
    background-color: #f8f8f8;
    color: #111111;
    font-size: 1cm;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 3px solid #000000;
    display: block;
    height: 60px;
    text-align: center;
    font-family: 'Oswald', sans-serif;
}
ul a:hover {
    color: #ff4500;
    border-bottom: 5px solid #ff4500;
}
h1:hover {
    color: #ff4500;
}

Działa tak, jak powinno. Bardzo dziękuję  :smiley: