Progress Bar Sizing - css

Question

I am attempting to size the progress bar to be 300px x 300px but it keeps cutting off the top of the circle and the text at the bottom.
It should look like this:
But it looks like this after my code:
What should I adjust based on my code? Have tried to adjust the height and width of multiple containers but still no luck.:
#progress-bar {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-51%, -50%);
width: 40%;
}
.container {
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
}
.container .card {
position: relative;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border-radius: 4px;
text-align: center;
overflow: hidden;
transition: 0.5s;
}
.container .card:before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
pointer-events: none;
z-index: 1;
}
.percent {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow: inset 0 0 50px #000;
background: #222;
z-index: 1000;
}
.percent .number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.percent .number h2 {
color: #777;
font-weight: 700;
font-size: 40px;
transition: 0.5s;
}
.card:hover .percent .number h2 {
color: #fff;
font-size: 60px;
}
.percent .number h2 span {
font-size: 24px;
color: #777;
transition: 0.5s;
}
.card:hover .percent .number h2 span {
color: #fff;
}
.text {
position: relative;
color: #777;
margin-top: 20px;
font-weight: 700;
font-size: 18px;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s;
}
svg {
position: relative;
width: 150px;
height: 150px;
z-index: 1000;
}
svg circle {
width: 100%;
height: 100%;
fill: none;
stroke: #191919;
stroke-width: 10;
stroke-linecap: round;
transform: translate(5px, 5px);
}
svg circle:nth-child(2) {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.card:nth-child(1) svg circle:nth-child(2) {
stroke-dashoffset: calc( 440 - (440 * 90) / 100);
/* use to adjust progress bar */
stroke: #00ff43;
}
<div id="feedbox-mid">
<div id="progress-bar">
<div class="container">
<div class="card">
<div class="box">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="number">
<h2>90<span>%</span></h2>
</div>
</div>
<h2 class="text">Html</h2>
</div>
</div>
</div>
</div>
</div>

Answer 1

I increased the width and height in .container .card. to 400px each.