Максим

.smal{
width: 210px;
height: 266px;
margin: 10px;
background-color: blue;
display: inline-block;
}

а вообще если хотите что бы везде так было то указывайте размеры в % https://jsfiddle.net/jbwjbxqs/1/

1) https://youtu.be/YDKskOH5sSw
2) https://youtu.be/Dtm2HeqqZiU

к примеру если взять выпадающее меню которое будет находится в неком родительском блоке и оно будет по размеру меньше самого скрытого блока но у него будет свойство : hidden то его попросту не будет и всё
clearfix очень удобен

у вас у меню есть свойство overflow:hidden; и ваше меню по этому и не видно , оно скрыто
как решить ?

.main-nav {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    font-weight: bold;
    background: url('img/main-nav-bg.png');
    margin-top: -25px;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: justify;
    padding-left: 140px;
--->    overflow:hidden;  <---  убрать
    padding-right: 140px;
    box-shadow: 4px 7px 9px 1px rgba(0, 0, 0, 0.35);
}