I have this issue where it seems alright in JS fiddle but is having an issue in my html/css file:

JSFiddle:

But on my site, theres a gap created by the text:

<div >
    <ul>
      <li>
        <span>
        <div >
        <img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
        </div>
        </span>
        <p >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        </p>
      </li>
      
      <li>
        <span>
        <div >
        <img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
        </div>
        </span>
        <span> 
        <p >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        </p>
        </span>
      </li>
      
      <li>
        <span>
        <div >
        <img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
        </div>
        </span>
        <p >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        </p>
      </li>
      
      <li>
        <span>
        <div >
        <img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
        </div>
        </span>
        <p >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        </p>
      </li>

    </ul>
    </div>

CSS:

.bubble ul { 
  columns:4;
  list-style: none;
  display:flex;
  align-items: center;
  justify-content: center;
}
.bubble-bg {
  width: 300px;
  height: 300px;
  border-radius: 20% 45% 45% 5%;
  background: #f5e511;
  overflow: hidden;
}
.bubble-bg img {
  max-width: 100%;
  max-height: 100%;
}

.desc {
  font-size: 26px;
}

Any reasons why the text does this?

My intention is to have the design looks like this:

Any help would be appreciated thank you

CodePudding user response：

.bubble li{
   margin:10px;
   
}

if you don't need margin top bottom ,release those points.

CodePudding user response：

try making the li margin and padding 0. also did you already create a css reset?