css border-radius circle becomes ellipse with position: absolute

Question

I am creating a circle around a font awesome icon. My problem is when I add position: absolute the circle became an ellipse.

The same happens if I was to set display: block

Here is an image of what I am trying to achieve -

<slide class="assessment-score">
  <div class="score-heading pass">
    <span id="score-salutation" class="light">CONRADULATIONS</span>
    <span id="score-message">YOU HAVE PASSED</span>
    <i class="fa fa-check-circle"></i>
  </div>
  <div class="score-results">
    <span id="score">You have scored 92%</span>
    <button>DOWNLOAD YOU CERTIFICATE</button>
    <a id="assessment-close"><i class="fa fa-times-circle-o"></i> CLOSE ASSESSMENT</a>
  </div>
</slide>

the css

slide.assessment-score .score-heading{
  height: 33%;
  background-color: #a8db66;
  border-radius: 5px 5px 0 0;
  color: #ffffff;
  position: relative;
}
slide.assessment-score .score-heading i{
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 6em;
  margin-bottom: -30px;
  border-radius: 50%;
  padding: 1rem
  background-color: black;
}

Answer 1

To horizontally center an absolutely positioned div you don't use left: 0 and right: 0 . As you can see, that actually stretches it out by setting one end of the div to the left edge of the containing box, and the other end to the right edge.

To horizontally center an absolutely positioned div try this:

slide.assessment-score .score-heading i {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

For details about how this works see: Element will not stay centered, especially when re-sizing screen