Проблема с окрашиванием текста, как исправить?

почему цвет не распределяется по всему тексту если width: 100px; background: red; просто красный цвет окрашивает половину текста при 100 пикселей, а при 400 пикселей окрашивает полностью.? Как при 100 пикселей окрасить текст полностью, а не на половину Помогите решить проблему

вот код:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content">

<h1>Урок HTML разметки</h1>
300 тысяч фунтов стерлингов было потрачено британскими учеными на изучение взаимодействия уток с водой.<p> В результате длительного исследования им удалось выяснить, что всем остальным способам провести время в воде утки предпочитают дождь, который заменяет им душ.</p>
</div>

<div class="content1">


<h1>Урок html разметки</h1>
Еще одно шокирующее открытие исследователей Туманного Альбиона наконец объяснило страдающим от избыточного веса, в чем заключается их проблема.<p> В ходе научного эксперимента британским ученым удалось установить, что худые люди, как правило, едят меньше, чем полные.</p>
</div>
<style type="text/css">
.content{
width: 100px;
background: red;
}

.content1{

background: green;

}
</style>
</body>
</html>

html

css

2 ответов

Чтобы закрашивалось полностью, нужно font-size задать, чтобы буквы были меньше, например так:

      .content {
          width: 100px;
          background: red;
          font-size: 75%;
      }

В конце курса будет про адаптивность сайта, чтобы сайт нормально выглядел в мобильных телефонах.

Обычно делают по grid system, как в курсе по Bootstrap. Там каждый блок по сетке делается.

Я могу с вами связаться на любом соц.сети? У меня к вам вопрос по поводу программирования!