CSS Circle issue Shape! That's weird

[Plee]

Hi there!
I am trying to figure out why the instead of getting a perfect circle I get an oval shape.

Look at the code:

<div className="service-items">
          <div className="service--circle-full">
            <span>1</span>
          </div>
          <p className="service--topic">{t('service.topic1')}</p>
        </div>

CSS

.service-items {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }
  
  .service--topic {
    font-size: var(--fs-desc);
    margin-left: 20px;
  }

.service--text {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
}

.service--circle-full{
  height: 70px;
  width: 70px;
  background-color: var(--primaryGreen-400);
  color: var(--white);
  border-radius: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

Let me know how to fix this please.

Best
P.

[Guided]

I was looking at your earlier post,

after putting your code into VS code, and changing the colours I got circles

you might have to provide more of your project, or create a small project with just the bare minimum.

I often find the answer when isolating my problem into a tiny project.
but if I don’t I can use it to display what I’m having an issue with.

[Plee]

H there. I solved adding flex: 1 and it works,

.service–topic {
font-size: var(–fs-desc);
margin-left: 20px;
flex: 1;
}

[lasjorg]

flex: 1 might have unexpected results if the available space changes. The circle is a flex item so you can prevent it from growing/shrinking.

.service--circle-full {
  flex: 0 0 auto;
}

You can also add the width of the circle for the flex-basis but I would keep it where it is now.