Come fare in modo che un elemento su una pagina web occupi il 100% della larghezza disponibile?

/* L'uso di display: block; permette all'elemento di occupare tutta la larghezza disponibile di default */
element {
  display: block;
}

/* È possibile specificare esplicitamente width: 100%; */
element {
  width: 100%;
}

/* A volte è utile considerare box-sizing, affinché padding e border non aumentino la dimensione */
element {
  width: 100%;
  box-sizing: border-box; /* border e padding inclusi nella larghezza totale */
}

/* Per gli elementi flex o grid, si può usare flex-grow o grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* L'elemento occuperà tutta la larghezza disponibile nel contenitore flex */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Esempio: due colonne, ciascuna occupa 1fr (parte dello spazio libero) */
}

.grid-item {
  grid-column: span 2; /* L'elemento occuperà due colonne */
}