Один блок залезает на другой, почему текст залезает на картинку?

/** {
  border: 1px solid red;
  margin: 1px;
}*/

.works {
  width: 100%;
}

.works .works-wrapper .works-items {
  width: 33.33%;
}

/*.works .works-wrapper .works-items .works-img {
  height: 300px;
}*/

.works .works-wrapper .works-items .works-img img {
  width: 100%;
}

.works .works-wrapper .works-about {
  color: black;
}

<section class="works">
  <div class="works-wrapper">
    <div class="works-items">
      <div class="works-img">
        <img src="http://via.placeholder.com/250x250/33ff99/555555?text=text" alt="">
      </div>
      <div class="works-about">
        <span>ABOUT</span>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. ncidunt sint vitae corporis doloremque molestiae debitis. Tempore dignissimos qui nam corrupti velit corporis quae vel quasi aliquam itaque est quam ratione aperiam nesciunt, porro ipsam
          sed eaque unde harum voluptates enim?</p>
      </div>
    </div>
  </div>
</section>