Ako spraviť, aby prvok na webovej stránke zaberal 100% dostupnej šírky?

/* Použitie display: block; umožňuje prvku štandardne zaberanie celej dostupnej šírky */
element {
  display: block;
}

/* Môžete výslovne uviesť width: 100%; */
element {
  width: 100%;
}

/* Niekedy je užito zvážiť box-sizing, aby padding a border nezvyšovali veľkosť */
element {
  width: 100%;
  box-sizing: border-box; /* border a padding sú zahrnuté v celkovej šírke */
}

/* Pre flex alebo grid prvky možno použiť flex-grow alebo grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Prvok zaberie celú dostupnú šírku vo flex kontejnere */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Príklad: dve stĺpce, každá zaberá 1fr (časť voľného priestoru) */
}

.grid-item {
  grid-column: span 2; /* Prvok zaberie dva stĺpce */
}