HTML sayfa boyutu küçülünce Div'ler kayıyor

[efew0]

Videoda gördüğünüz divlerde sağ tarafta olan yeşil Div'in arasındaki boşluk sayfa küçülünce küçülüyor. Bunun olmasını istemiyorum. Ne yapabilirim?

Efe's Site ve diğer 1 sayfa - Kişisel

This is "Efe's Site ve diğer 1 sayfa - Kişisel" by Efe on Vimeo, the home for high quality videos and the people who love them.

vimeo.com

 

[DarkSea]

Kod olarak paylaşsan daha iyi yardımcı olurdum fakat kodları görmediğim için tahminen söylüyorum div etiketlerine sabit bir yükseklik ver mesela height: 100px; gibi resim için de height: 100%; width: 100px gibi resme göre ayarlayıp bir değer vermen sorunu çözecektir diye tahmin ediyorum. Örnek olarak aşağıda benzer şeklini yaptım
<div class="container">
<div class="left-line"></div>
<div class="right-line">
<img src="https://images.pexels.com/photos/39...?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Resim">
</div>
</div>

.container {
display: flex;
justify-content: center;
align-items: center;
}

.left-line {
height: 100px;
width: 60%;
background-color: gray;
overflow: hidden;

}

.right-line {
height: 100px;
width: 30%;
background-color: green;
overflow: hidden;

}

.right-line img {
height: 100%;
width: 100px;
object-fit: cover;

}

 

[efew0]

Kod olarak paylaşsan daha iyi yardımcı olurdum fakat kodları görmediğim için tahminen söylüyorum div etiketlerine sabit bir yükseklik ver mesela height: 100px; gibi resim için de height: 100%; width: 100px gibi resme göre ayarlayıp bir değer vermen sorunu çözecektir diye tahmin ediyorum. Örnek olarak aşağıda benzer şeklini yaptım
<div class="container">
<div class="left-line"></div>
<div class="right-line">
<img src="https://images.pexels.com/photos/39...?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Resim">
</div>
</div>

.container {
display: flex;
justify-content: center;
align-items: center;
}

.left-line {
height: 100px;
width: 60%;
background-color: gray;
overflow: hidden;

}

.right-line {
height: 100px;
width: 30%;
background-color: green;
overflow: hidden;

}

.right-line img {
height: 100%;
width: 100px;
object-fit: cover;

}

Hocam denedim fakat olmadı. Kodu buraya atamadım hocam link olarak attım. Projedeki tüm kodlar bu kadar.

Kod

jpst.it

 

[DarkSea]

Sorununu tam olarak doğru anlamadım sanırım, sorunun ne olduğunu anlarsam yardımcı olacağım.
Sayfa küçülttüğünde gri div solunda boşluk fazla kalıyor yeşil div sonunda boşluk az kalıyor ben her iki taraftan da eşit boşluk istiyorum diyorsan html ve css kısmını aşağıdaki gibi güncelleyip sorunu çözebilirsin.
Eğer sorun bu değil başka bir şey ise daha net ifade edersen yardımcı olmaya çalışırım, kolay gelsin.

<!-- Main Area -->
<div class="main-area">
<div class="main-area-header">
<h2 class="text-start ps-4">Efe</h2>
</div>
<div class="main-area-right">
<center>
<img src="Images\bitmoji.png" alt="Unknown" id="bitmoji">
</center>
</div>
</div>


<style>
.body {
background-color: white;
}

.main-area {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 30px;
}

.main-area-header {
background-color: grey;
border-right: 1px solid black;
flex: 1;
display: flex;
justify-content: start;
align-items: center;
height: 100px;
}

.main-area-right {
background-color: green;
height: 100px;
width: 30%;
min-width: 200px;
overflow: hidden;
}

@media (max-width: 600px) {
.main-area-right {
width: 200px;
}
.main-area-header h2 {
width: 100px;
}
.main-area {
padding: 10px 10px;
}
}
</style>