Witaj,
Po pierwsze - używaj znaczników HTML5 do budowania struktury dokumentu. Wbij sobie ten nawyk do głowy bo to bardzo ważne. Tak powinien wyglądać twój kod html:
<body>
<header class="header">
<nav class="nav">
<li class="nav__item">1</li>
<li class="nav__item">2</li>
<li class="nav__item">3</li>
<li class="nav__item">4</li>
<li class="nav__item">5</li>
</nav>
</header>
</body>
Co do tego tła, które Ci się tworzy. Nie jest to tło tylko domyślny margines przeglądarki (w chrome ustawiony na 8 px). Jeżeli chcesz aby na całej stronie nie było takich marginesów to dodaj sobie dwie właściwości do znacznika body:
body {
margin: 0;
padding: 0;
}
/* Ten zapis resetuje marginesy i paddingi dla znacznika body */
lub ewentualnie
* {
margin: 0;
padding: 0;
}
* Ten zapis resetuje marginesy i paddingi dla wszystkich znaczników na stronie */
To powinno wyeliminować twój problem z paddingiem.
Jeżeli chcesz dobrze pozycjonować elementy w css to poczytaj sobie o właściwości position i jej wartościach (relative, absolute, static, sticky)