Como fazer um elemento numa página web ocupar 100% da largura disponível?

/* Utilizar display: block; permite que o elemento ocupe toda a largura disponível por padrão */
element {
  display: block;
}

/* Pode-se especificar explicitamente width: 100%; */
element {
  width: 100%;
}

/* Às vezes, é útil considerar box-sizing, para que padding e border não aumentem o tamanho */
element {
  width: 100%;
  box-sizing: border-box; /* border e padding incluídos na largura total */
}

/* Para elementos flex ou grid, pode-se usar flex-grow ou grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* O elemento ocupará toda a largura disponível no contêiner flex */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Exemplo: duas colunas, cada uma ocupa 1fr (parte do espaço livre) */
}

.grid-item {
  grid-column: span 2; /* O elemento ocupará duas colunas */
}