CSS responsive tasarımda şeklin oranı bozulması
https://drive.google.com/file/d/1z63PQOeQqQDEy1Sn7WRiKH2fDlqF-eJ7/view
https://drive.google.com/file/d/1FJ2gCZ2SPdPj2nyvsea8FPixouBEGKFJ/view
Yukardaki görsellerde belli olduğu gibi sayıların yazılı olduğu div responsive tasarımda oranı bozuluyor. Bunu nası engelleyebilirim?
<div class="music-info">
<div class="info-left">
<div class="order">1</div>
<img src="https://i.ytimg.com/vi/az6m9IE8h4o/maxresdefault.jpg" alt="">
<div class="artist">
<h2>In My Feelings</h2>
<h6>Drake</h6>
</div>
</div>
<h5>2,089,766</h5>
</div>
.main-container > .musics-list > .music-info > .info-left > .order {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #979797;
color: #2d2b2b;
font-weight: 900;
margin-right: 10px;
}