title: flex container ruining a border-radius, How to fix this?
body: <p>I have the positioning exactly how I want it, but the circle around the 58 is supposed to be a perfect circle, instead it's adjusting to the content in the container. How can I fix this problem?</p>
  <p>Here is what it looks like <a href="https://i.stack.imgur.com/Tb75A.png" rel="noreferrer">https://i.stack.imgur.com/Tb75A.png</a>
  Here is what I need it to look like <a href="https://i.stack.imgur.com/LgQFI.png" rel="noreferrer">https://i.stack.imgur.com/LgQFI.png</a></p>
  <p>Here is the JSX</p>
  <pre><code>&lt;div className=&quot;second-col-container&quot;&gt;
            &lt;h2&gt;Air Quality Index&lt;/h2&gt;
               &lt;div className=&quot;mod-container&quot;&gt;
                 &lt;span className=&quot;index&quot;&gt;58&lt;/span&gt;
  
               &lt;div className=&quot;para-mod&quot;&gt;
                 &lt;span className=&quot;mod&quot;&gt;Moderate&lt;/span&gt;
                &lt;div&gt;
                  Air quality is acceptable; however, for some pollutants there
                  may be a moderate health concern for a very small number of
                  people who are unusually sensitive to air pollution.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  </code></pre>
  <p>CSS</p>
  <pre><code>.second-col-container {
    background-color: white;
  
    width: 250px;
    grid-area: air-index;
    margin-top: 20px;
    border-radius: 10px;
  }
  
  .second-col-container h2 {
    margin-bottom: 20px;
    margin-left: 10px;
  }
  
  .para-mod {
    font-size: small;
    width: 60%;
    color: grey;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
  
  .index {
    margin: 5px 0 0 5px;
    color: black;
    font-size: xx-large;
    border: 3px solid rgb(223, 217, 217);
    border-left-color: rgb(255, 170, 11);
    border-bottom-color: rgb(255, 170, 11);
    padding: 15px;
    border-radius: 100%;
  }
  
  .mod-container {
    display: flex;
  }
  
  .mod {
    font-size: large;
  
    color: black;
  }
  </code></pre>