html,css problém

Ahojte, chcel by som sa opýtať a poradiť, ked robim moju prvu amatersku stránku cez html,css a už sa mi to pár krat stalo. Ked si pomáham cez dev tools a ukážem myškou dole medzi elementami napr na - navitaion, ako to je ukazane na obrazku tak to ukazuje vyššie ako je ta navigáca pritom ked som pozeral padding ani margin som tam nezadal tak neviem prečo to takto ukazuje. Neviete prosim pomôcť ?

https://imgup.cz/image/LMBZ

teraz mam ešte další problem kedy 1 element ktorý je v headeri ukazuje dev tools že je v main kontente no
asi sa musim pohrat ešte s floatovanim

bez zivej ukazky sa tazko radi. neviem povedat ci pouzivas float alebo flex alebo grid alebo xy

poznas codepen? live web editor, kde mozes pisat html/css/js. ukazku daj potom ako public a posli link

https://codepen.io/Rastosss/pen/EMYypa

Dal som public, malo by to íst

Trošku som to pomenil ale stále mi to blbne. Ak to funguje a vidíš tam také biele políčko tam je img ale neviem to tam vložit, ale to je jedno. neviem ako mám dať aby to nepresahovalo to menu nalavo lebo to ide skrz a chcem aby
to biele políčko (article) aby začínal tam kde končí zboku to menu kde su vypísane tie komponenty.

https://codepen.io/anon/pen/OqLXrv?editors=1100

pozri sa na
BEM - http://getbem.com/
Flex layout - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout a https://css-tricks.com/snippets/css/a-guide-to-flexbox/

nie je to asi odpoved, ktoru si cakal ale dnes uz nepotrebujes float. float ti vytrhne vsetky elementy z kontextu, preto sa ti elementy zobrazovali v developer console inde nez by mali a nerespektovali sa navzajom.
moj tip je aby si nepouzival float a zmenil zdroj odkial sa ucis.

No vsetky zdroje z ktorych som aa ucil tam bol float. Mozno preto ze to bolo starsie tak teraz sa to uz nepouziva

// Spojený príspevok Pon 25.02.19 14:45

pozriem tie linky čo si mi poslal, a ďakujem za to codepen ako si to upravil ako to má spravne byť, práve to pozerám a učím sa z mojich chýb

Mohol by som sa ešte prosím opýtať či sa dá niakym nástrojom alebo sa to musim naučit, zmenšit obsah css-ka aby som tam tolko toho nemal, lebo na to kolko tam mam malo obsahu mam vela csska
https://codepen.io/Rastosss/pen/EMYypa (nieje tam logo ani obrazok nad h1)