Bo całość ma ustaloną pozycję wg tego, co jest w container_header. Jeśli chcesz mieć ten bordowy pasek przez cały ekran to ustaw kolor dla head, a szerokość container_header na tyle, ile ma zajmować miejsca na środku strony. I nie nadużywaj id. Id używasz, jeśli dany element jest unikatowy dla danej strony. Poza tym selektory mają przypisane coś, co nazywa się "precyzją". Działą to w ten sposób:
- selektor znacznika (<p>, <head>, <span>) ma wartość 1,
- selektor klasy (class="klasa z klasą") ma wartość 10,
- selektor identyfikatora (id="#ajdi") ma wartość 100,
- styl wpisany (np. <p style: color="red"> ma wartość 1000.
Jak widzisz każde id to 100 punktów. Teraz załóżmy, że chcesz nadpisać jakiś styl jednego elementu, np. masz kolejny div id="idDiva", gdzie masz litery szare, a w drugim elemencie, który będzie dziedziczyć style po nim, chcesz dać litery, powiedzmy, czarne. W tym momencie musisz stworzyć selektor, który będzie miał ponad 100 punktów precyzji. Co wtedy robisz? Tworzysz kolejne ID. Razem z dziedziczeniem ten nowy div ma już 200 punktów precyzji. W bardziej rozbudowanych stronach, gdzie tych elementów zagnieżdżonych będzie więcej, nagle okaże się, że masz jakiegoś "potwora", który ma kilkaset punktów precyzji i musisz tworzyć kolejne jakieś wygibasy, żeby nadpisać jego precyzję. No i nie bój się ostylować znaczników. Body czy head to taki sam div, jak... div. Też mają marginesy, można nadać mu tło, linię dookoła.