Как сделать чтобы блок не растягивался css

Чтобы предотвратить растягивание блока в CSS, нужно использовать свойство max-width и установить максимальную ширину блока. Вот пример кода:

HTML:

<div class="container">
  <h1>Мой заголовок</h1>
  <p>Это текст внутри моего блока</p>
</div>

CSS:

.container {
  max-width: 600px; /* устанавливаем максимальную ширину блока */
  margin: 0 auto; /* выравниваем блок по центру */
  border: 1px solid #ccc; /* добавляем границу для визуализации блока */
  padding: 1rem; /* добавляем отступы для текста внутри блока */
}

В данном примере мы задаем ширину блока с помощью свойства max-width. Это означает, что блок не будет превышать указанную ширину, но может быть меньше, если содержимое блока меньше его максимальной ширины. Мы также задаем отступы с помощью свойства padding, чтобы создать пространство для текста внутри блока.

Чтобы выровнять блок по центру страницы, мы используем свойство margin: 0 auto, которое устанавливает автоматические отступы сверху и снизу и автоматический отступ по горизонтали, что выравнивает блок по центру страницы.

Используя свойство border, мы добавляем границы для визуализации блока на странице.

Если содержимое блока будет больше, чем его максимальная ширина, то блок будет создавать горизонтальную полосу прокрутки. Вы можете установить свойство overflow-x: hidden; для блока, чтобы скрыть горизонтальную полосу прокрутки.