Как на CSS сделать адаптивный круг?
div h4 {
    
    background: #009688;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 0;
    padding: 50% 0;
    border-radius: 50%;
}
.outsideCircl{
  height:30%;
}
Создай див вокруг h4 и этому диву уже ширину задавай,а круг внутри него будет адаптивным
У вас изначально width / height - разные, поэтому в частном случае вы просто подогнали круг под пропорции монитора. У круга ширина и высота (условные, если вписать его в квадрат) должны быть одинаковы.