CSS Bilen yardım edebilirmi ?

Merhaba arkadaşlar css te bir sorun yaşıyorum resimdede gördüğünüz gibi ekranı küçültüğümde menüler ve geri kalan kısımlar sol taraftaki menü barınaltına geçip kayboluyorlar bir türlü bunu sol tarafı geçmemesi için sınırlandıramadım

.middle {
 

  width: 100%;
  display: inline-block;
  vertical-align: top;
  z-index: -10;
  position: absolute;

}
.wrapper {
  
  margin-left: 22px;
  margin-right: 22px;

}

.left {
  left:0px;
  right: auto;
  width: 250px;
  display: inline-block;
  vertical-align: top;
  border-radius: 0 0 10px 10px;
  background-color: #888888;
  position: fixed;
  box-shadow: 0px 0px 8px 0px rgba(158,160,183,0.32);

}

.right {
  
  top: 48px;
  left: 100%;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  width: 280px;

}

sol menüyü ve sağ content i ayrı div lere alıp col-3 col-9 verebilirsin

cevabınız için teşekürler hocam yanlız bootsrap uyumlu değil

@media only screen and (max-width: 1080px) {
.middle {
width: 70%;
float:right;
display: inline-block;
vertical-align: top;
z-index: -10;
position: absolute;
}
}

Bunu ekleyip test eder misiniz?

Merhaba hocam media ile width i daha önce sınırlandırmıştım çalışıyor bu zaten ama her çözunurluğu eklemek lazım ve başka alanları ona göre tasarlamak gerekiyor ayrı yetten o sorunu çözdüm bu sefer ekran küçüldükçe sağ taraf dışarıya kaçıyor

.middle {
    
  width: 70%;
  display: inline-block;
  vertical-align: top;
  z-index: 10;
  position: relative;
  margin-left: 250px;
  margin-right: 15em;
}
.wrapper {
  
  margin-left: 22px;
  margin-right: 22px;

}

.left {
  left:0px;
  right: auto;
  width: 250px;
  display: inline-block;
  vertical-align: top;
  border-radius: 0 0 10px 10px;
  background-color: #888888;
  position: fixed;
  box-shadow: 0px 0px 8px 0px rgba(158,160,183,0.32);

}

.right {
  
  top: 48px;
  left:100%;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  width: 280px;

}

.left { position:fixed; left:0px; height:100%; width:250px }
.right { position:fixed; left:250px; height:100%; right:0 } // width olmayacak

burayı unuttum sorunu çözdüm sanırım

.middle {
    
  top: 70px;
  left: 10px; 
  right: 10px; 
  bottom: 10px;
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  margin-left: 250px;
  margin-right: 280px;
  
}

saçma bir css yapısı olmuş olabilir bir laf vardır çalışıyorsa kessinlikle dokun belkide dokunmada olabilir o söz

evet hocam cevabınız için teşekkürler left ve right teki width menülere ayrılan boyuttur dediğnizi merakımdan denedim menüler kayboldu teşekkürler yinede

Bir sayfada önizlemesini yapabiliyorsak eğer URL verebilirsiniz canlısını görüp müdahale daha kolay olur
___

gerçi dashboard olduğunu yeni farkettim.

localhost hocam anydesk team viewer var