Обтекание картинки текстом

https://html5book.ru/obtekanie-kartinki-tekstom/

HTML

<h1>List of towns in England</h1>
<h2>Amersham</h2>
<p><img class="left" src="https://html5book.ru/wp-content/uploads/2015/02/Amersham.jpg">Amersham is ...</p>
 
<h2>Buxton</h2>
<p><img class="right" src="https://html5book.ru/wp-content/uploads/2015/02/Buxton.jpg">Buxton is ...Quibusdam qui reiciendis dolorem ratione. Blanditiis sit neque asperiores exercitationem quo ut. Atque aut facilis sit voluptas accusantium dolor quaerat. Aut dolorem tenetur enim facilis dignissimos sed corporis. Eum sunt labore tempore dolorem temporibus. Quo tempora voluptate inventore quia eligendi sunt voluptas. Quod sunt alias officiis consequuntur laborum. Quia velit porro sed enim omnis animi. Quo ipsam pariatur inventore quibusdam. Quod porro accusantium maxime amet excepturi dignissimos consequatur. Voluptates atque laboriosam dicta beatae enim rerum. Velit quam enim sit velit. Autem consequuntur ab quis eos hic. Nostrum quos culpa aut voluptas voluptatem est. Odio ullam vitae non ut. Quos asperiores rerum sed voluptatem sunt voluptas. Sit ut deleniti occaecati earum ut id in voluptas. Eaque aliquid commodi odit sint qui. Explicabo officia cumque qui non sed. Fugit laborum impedit eos dolorem. Eum facilis amet quia cumque laborum in incidunt.loren32</p>
 
<h2>Chesterfield</h2>
<p class="columns">Chesterfield is ...</p>
<img class="img-center" src="https://html5book.ru/wp-content/uploads/2015/02/Chesterfield.jpg">
<p class="columns">It has ...</p>
 
<h2>Dartmouth</h2>
<p><img class="center" src="https://html5book.ru/wp-content/uploads/2015/02/Dartmouth.jpg">Dartmouth is ...</p>

CSS

body {
  margin: 0;
  background: #FFF8E8;
  padding: 0 20px;
  font-size: 90%;
  counter-reset: h2; /*создаем счетчик для любого заголовка h2*/
}
h1 {
  font-family: 'Lora', serif;
  color: #564C4A;
  font-weight: 300;
}
h2 {
  font-family: 'Lora', serif;
  color: #B00D22;
  font-weight: 300;
  clear: both; /* отменяем обтекание с обеих сторон */ 
  padding: 1em 0 0.25em;
  border-bottom: 2px solid;
  counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */
}
h2:before {
  content: " " counter(h2) '. '; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */
}
p {
  font-family: arial;
  color: #785F5B;
  line-height: 1.3;
}
 
/********** картинка слева **********/
.left {
  float: left;
  margin: 0 1em 1em 0;
}
 
/********** картинка справа **********/
.right {
  float: right;
  margin: 0 0 1em 1em;
}
 
/********** картинка между текста **********/
.columns {
  float: left;
  max-width: 30%;
  margin: 0;
}
.img-center {
  float: left;
  margin: 0 1.5% 0 1.5%;
  max-width: 37%;
}
/********** картинка по центру********* */
.center {
  display: block;
  margin: 0 auto 1.5%;
}