Beste leden,

Ik ben momenteel bezig met een projectje voor school, maar ik krijg de header van mijn website niet op full-width. Het is de bedoeling dat alleen de afbeelding over het hele scherm mee gaat zeg maar en de tekst zoals het nu is, mooi in het midden blijft.

URL: http://goo.gl/Y48MkE.

Ik hoop dat jullie mij kunnen helpen. Alvast hartelijk dank!

Je moet dan de afbeelding niet in 1 container zetten.
Maak van de container een class, en maak een section met de afbeelding als achtergrond.
Vervolgens plaats je de container in de section.

Er zit een container div met 1200px, daarbinnen heb je de header div geplaatst met width 100%.
Dan gaat het nooit lukken.

Uiteraard kan er gespeeld worden met viewport width CSS zoals: width: 100vw; ipv 100%.

In dit geval is het probleem direct opgelost als je de header div verplaatst buiten (en boven) de container div.
Probeer het maar eens uit via dev tools (inspect).

zet er ook gelijk bij:
background-position: center center;
background-size: cover;

Het is inmiddels gelukt, bedankt beiden! Heb nu enkel nog last van het witte balkje bovenin de website (ruimte over bovenin), snap niet hoe het daar komt.

De witte rand boven heeft twee oorzaken:

1. De body blijkt een margin 8px te hebben. Dit is user agent stylesheet-based. Dus een default. Wat je moet doen is je body in de style.css updaten met margin: 0;
2. De H1 in de header heeft een margin aan de bovenkant, die margin valt zelfs buiten de header, waardoor de header naar beneden wordt gedrukt.
Update in .header h1 (ook in style.css regel 27) met margin-top: 0;

Dan is de witte rand weg.

android chrome gaat nog niet helemaal goed

Ruben,

Wat betreft de opmerking van Arjen:

Het logo (image) in de header behoudt zijn breedte, maak deze max-width: 100%;
Dus bijv:
.header img { max-width: 100%; }

Daarnaast zie ik dat de .header 95% breedte krijgt bij scherm onder de 1020px. Zie style.css regel 215.

@media screen and (max-width 1020px) {
.header {
width: 100%; // is nu 95%
}
}