What I don't understand ➔ The same image is repeated slightly below the image

Thank you for browsing.
I'm doing copy coding for isara right now
Between the bottom of the isara image and the orange frame
There was a subtle gap, and the image was displayed with a part repeated.

For the time being, background-size: cover;and background-repeat: no-repeat;
I am writing in the div that surrounds the target img, but there is a slight gap
It has been repeated.
If anyone knows how to deal with it, would you please let me know?

    <p>With programming<br>
        Get the stability of your life</p>
    <p>Bangkok Nomad Engineer Training Course iSara [Isara]</p>
.example {
  position: relative;
  background-image: url (images/main.jpg);
  background-size: cover;
  background-repeat: no-repeat;
.example>img {
  min-height: 310px;
  width: 100%;
  max-width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover