Блоки наезжают друг на друга

Общее
1

При уменьшении окна браузера меню начинает наезжать на div с классом .main-content. Пытался это исправить, но не получилось. Возможно ли сделать так, чтобы когда меню выстраивалось в две, три т.д. строки, блок .main-content находился ниже меню?

`

Test

Text

`

body {
padding: 0;
}
h1,
h2,
h3,
p {
padding: 10px;
}
.wrapper {
max-width: 960px;
margin: 0 auto;
}

/* ----- Главное меню ----- */

.navbar-fixed-top a {
text-decoration: none;
}
.navbar-fixed-top {
font-size: 0;
display: block;
margin-right: 35px;
text-align: center;
}
.navbar-fixed-top li {
font-size: 16px;
display: inline-block;
margin-top: -2px;
padding: 10px;
white-space: nowrap;
border-top: 2px solid #81bef7;
border-bottom: 2px solid #81bef7;
}
.navbar-fixed-top li:hover {
background-color: #fafafa;
}

2

Честно говоря не понимаю, в чем проблема. Блок .main-content и так находится ниже меню, и меню на него не налезает. Можете наглядно продемонстрировать?

3