Comment faire en sorte que la couleur d'arrière-plan de l'en-tête remplisse toute la largeur d'un en-tête, d'un div, etc.?

Ajoutez ceci à la tête de votre html

<style>
*{
  margin: 0;
}
</style>

C'est une bonne pratique, car cela élimine toute marge par défaut présente dans les navigateurs.

On peut simplement mettre la marge à zéro (0) pour se débarrasser de la marge par défaut de la balise 'body' ...

body{
 margin: 0;
}

Comme le dit @Titus, c'est parce que l'élément body a une marge de 8px par défaut.

Vous devez supprimer cette marge, et il y a plusieurs façons de le faire comme vous l'avez fait déjà été donnés, mais ils ont des degrés d'utilité variables basés sur la cohérence, la flexibilité et la réutilisabilité.

Si nous regardons les solutions qui vous ont été données:

1. * {marge: 0; padding: 0} Cela supprime toutes les marges et le remplissage par défaut de tous éléments, vous devez donc le rajouter à tous les éléments que vous souhaitez conserver activé.

2. div.yourdiv {marge: -8px; } Cela fonctionne en "étirant" le div à l'extérieur du conteneur de 8px de chaque côté, de sorte que les bords chevauchent la marge créée par la balise body .
   Le côté positif est qu'il est appliqué uniquement à cet élément plutôt qu'à tous les éléments.
   Cependant, le problème est aussi qu’elle ne s’applique qu’à l’élément particulier - vous allez devoir ajouter une marge -8px à chaque enfant direct du corps, p.ex. soit envelopper chaque page dans un tel élément, soit dans les cas où vous n'avez pas (ou voulez) un wrapper, vous devrez l'ajouter individuellement à tous les enfants de la balise body .
   De plus, les valeurs de codage en dur telles que -8px sont moins flexibles, si quelque chose change à l'avenir des paramètres du navigateur (très peu probable), pour les navigateurs personnalisés ou inhabituels avec le 8px non par défaut (peu probable), à ​​avoir un conteneur supplémentaire dans votre HTML avec paramètres différents (tout à fait possible)

Une méthode plus cohérente, plus réutilisable et moins intrusive que celle ci-dessus est:

3. corps {marge: 0; } pour simplement supprimer la marge directement du body - vous ciblez directement l'élément à l'origine du problème et ciblez uniquement em > cet élément. Vous n'avez pas besoin de modifier vos propres éléments qui peuvent varier d'une page à l'autre (ou d'un site à l'autre!)

Exemple de travail:

<div style="margin:0px ; padding:0px; background-color:Grey">
<h1 style=" color:Orange ; text-align:center" id="title">Product Survey Form</h1>
</div>
<p style="color:blue ; text-align:center" id="description">After your every purchase from Serex technologies , we like to have a survey from <br> our customers in order to improves our services </p> 
<form id="survey-form" style="text-align:center">
   <label for="name" id="name-label">Name:</label>
  <input type="text" id="name" placeholder="First Name" required>
  <br>
<br>
   <label for="email" id="email-label">E-mail:</label>
  <input type="email" id="email" placeholder="Email" required>
  <br>
  <br>
   <label for="number" id="number-label">Age:</label>
  <input type="number" id="number" min="00" max="200" placeholder="Age">
  <br><br>
  <label for="dropdown" id="number-label">Gender:</label>
  <input list="dropdown" placeholder="Choose">
  <datalist id="dropdown">
   <option value="Male">
   <option value="Female">
   <option value="Others">
     </datalist>
  <p>What do you think about our service?</p>
  
     <label for="Excellent"> 
  <input id="Excellent" value="Excellent" type="radio" name="reviews">Excellent</label>
    <label for="ItsOkay!"> 
  <input id="ItsOkay!" value="Its Okay!" type="radio" name="reviews">Its Okay!</label>
     <label for="Hastobeimproved!"> 
  <input id="Hastobeimproved!" value="Has to be improved!" type="radio" name="reviews">Has to be improved!</label>
  <br><br>
  <p>Where have you heard about us?</p>
    <label><input type="checkbox" value="Newspapers " name="adverts"> Newspapers</label>
  <label><input type="checkbox" value="Relatives" name="adverts"> Relatives</label>
  <label><input type="checkbox" value="Television"name="adverts"> Television</label>
  <p>Additional Comments : </p>
  <textarea id="w3review" name="w3review" rows="4" cols="50" placeholder="Enter text here">
     </textarea>
  <br><br>
  <button type="submit" id="submit">Submit</button>
   </form>

body { margin:0;}