И идея си нямам защо при единия начин се получи, а при другия не. Ако може някой да обясни ще съм му благодарен 
Факта, че във видеото всичко е наред, а при теб не, при един и същ код може да значи само едно -> нещо се променя според резолюцията на екрана... "Камъчето, което обръща колата" се оказва променящата се височина на списъците(
li елементите), която височина от своя страна се променя от елемента вмъкнат във всеки един списък (
a елементите - хипервръзките).Те от своя страна са стилизирани така : горен падинг - 6px , долен - 5px (съответно сбора им е 11px).Височината на реда, обаче не е фиксирана никъде колко пиксела трябва да бъде и точно това "преобръща колата" и "чупи" дизайна.При една резолюция тя е 19px (11px падинг + 19px височина на реда = 30px - ок,допустимо е спрямо височината на дива с клас "horizontal") , при друго резолюция, явно като твоята височината на реда ръсте (11px + 20px = 31px - не е ок, лошо).Можеш да зададеш :
.horizontal a:link, .horizontal a:visited {
/*другите стилизации*/
line-height:19px;
}
За да видиш като проба, че ще се оправят нещата.
Защо обаче тези дребнави неща оказват такова влияние и "чупят" дизайна ? - Ами "плаващите" елементи(тези на които задаваш float:left,right,both) си имат своитве особености.В случая височината на неподредения списък (ul елемента) не обгръща своите "деца" (li елементите), защото неговата височина е буквално 0px(това се дължи на флоутването на неговите "деца" - li елементите) и флоута на ляво не е почистен което може да доведе до неочаквани резултати.Ако се загледаш внимателно във втората снимка, която си дал ще видиш, че зеленото блокче(div с клас "vertmenu") е изместено на ляво от началото на "жълтия му родител" точно след края на последния li елемент намиращ се отгоре му (края на блокчето "контакти").Това се получава така защото и li елементите и зеленото блокче(както и тъмно червеното) са флоутнати в едно и също направление - на ляво.Вижда се с просто око, че оранжевото разстояние което остава в хоризонталната навигация е по-голямо като дължина от дължината на зеленото блокче, следователно има място зеленото блокче да се "залепи" към последния li елемент на ляво(тъй като имаш определена височина на дива в който е поместена навигацията "залепянето" става точно под другите плаващи елементи).Като проба отново можеш да тестваш ако смениш местата на тъмночервеното блокче (див с клас "content") с мястото на зеленото блокче(както си направил и ти но без дори да сменяш направлението на флоута от ляво на дясно) ще видиш че няма да има такова чупене - това се получава така защото сега дължината на оранжевото пространство е по-малка от дължината на тъмночервеното блокче, следователно няма достатъчно място за него да се залепи на ляво към последния li елемент и пада на нов ред, което създава ефекта че всичко е наред.
Като цяло трябва да запомнеш едно много важно нещо имаш ли фоутване трябва да внимаваш как го използваш и при нужда да го почистваш!
Тук специално в този елементарен пример вариянти много - можеш да зададеш съответно на ul елемента или на div с ид "body" css свойството overflow:hidden което ще принуди тези елементи да обгърнат принудително своето съдържание (в случая своите флутнати "деца") или пък да използваш css свойството clear(било то с псеудо елемент или чрез стилизация на един див) за да почистиш проблемния флоут.
