Были ли проблемы при растягивании блока на ширину 100%

Растягивание блока на width: 100% может вызвать проблемы, если у родителя нет явно заданной ширины или если элемент имеет padding, border или margin. В таких случаях блок может выходить за границы родителя из-за боксинга.

Пример проблемы:

.parent {
  width: 500px;
  padding: 20px;
}

.child {
  width: 100%; /* Будет 500px, но с padding выйдет за границы */
  padding: 10px;
}

Решение:

1. Использовать box-sizing: border-box, чтобы padding и border включались в ширину:

.child {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

2. Для inline-block элементов можно добавить min-width: 100%.