Dlaczego menu nie jest szerokie na całą stronę?

Question

Postanowiłem cofnąć się nieco i przeczytałem kursy HTML i CSS od W3C, żeby się nieco douczyć. Później postanowiłem zrobić z tego jakąś stronę testową. Najpierw zrobiłem na starym laptopie, co do niej też będę chyba miał pytanie, ale to innym razem. Teraz jestem na drugim laptopie i jest już nieco późno w nocy (01:07 :D), być może dlatego mój mózg nie pracuje już na logicznym poziomie... ale za chiny nie mogę pojąć, czemu moje menu nie jest szerokie na całą stronę tylko urywa się tam gdzie kończy się ostatni link... Zgaduję, że brakuje jakiejś banalnej rzeczy, ale na prawdę nie mam pojęcia o co chodzi :D I to mnie masakrycznie nurtuje i już denerwuje, dlatego pytam i proszę was o małą pomoc... Tutaj kod strony:

http://cssdeck.com/labs/full/occj8dol

Z góry dziękuję za pomoc. A, i gdyby dało się jeszcze później wyśrodkować te linki w menu byłbym wdzięczny bardzo...

Answer 1

Być może jest to wina tego, że Twoje menu jest zrobione w formie listy a nie div'ów

Answer 2

Twoje menu jest na całą szerokość. Można to wywnioskować po zbadaniu elementu - ul ma 100% szerokości.
Jeżeli chcesz aby całe menu miało background zielony ustaw to dla elementu ul, a nie li [tak samo z border-bottom]

Jak wyśrodkować elementy? Możesz zrobić to za pomocą flexbox-a. Co to jest tutaj: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A jak osiągnąć takie wyśrodkowanie:
 

ul{
  display: flex;
  justify-content: center;
}

 

Comments

No tak jak myślałem, masakrycznie głupi błąd :D A tyle nad tym siedziałem...

Dzięki za ten flexbox! Panu wyżej też za pomoc.