Jak udělat, aby prvek na webové stránce zabíral 100% dostupné šířky?

/* Použití display: block; umožňuje prvku standardně zabírat celou dostupnou šířku */
element {
  display: block;
}

/* Můžete výslovně určit width: 100%; */
element {
  width: 100%;
}

/* Někdy je užitečné vzít v úvahu box-sizing, aby padding a border nezvyšovaly velikost */
element {
  width: 100%;
  box-sizing: border-box; /* border a padding jsou zahrnuty do celkové šířky */
}

/* Pro flex nebo grid prvky lze použít flex-grow nebo grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Prvek zabere celou dostupnou šířku ve flex kontejneru */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Příklad: dvě sloupce, každý zabírá 1fr (část volného prostoru) */
}

.grid-item {
  grid-column: span 2; /* Prvek zabere dva sloupce */
}