Comment faire en sorte qu'un élément sur une page web occupe 100% de la largeur disponible?

/* L'utilisation de display: block; permet à l'élément d'occuper toute la largeur disponible par défaut */
element {
  display: block;
}

/* Il est possible de spécifier explicitement width: 100%; */
element {
  width: 100%;
}

/* Parfois, il est utile de prendre en compte box-sizing, pour que padding et border n'augmentent pas la taille */
element {
  width: 100%;
  box-sizing: border-box; /* border et padding inclus dans la largeur totale */
}

/* Pour les éléments flex ou grid, on peut utiliser flex-grow ou grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* L'élément occupera toute la largeur disponible dans le conteneur flex */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Exemple : deux colonnes, chacune occupant 1fr (partie de l'espace libre) */
}

.grid-item {
  grid-column: span 2; /* L'élément occupera deux colonnes */
}