CSS Kayma Sorunu

Merhaba arkadaşlar. Ödevim var da
1. Sorun; Pencereyi küçültünce o sarı kısım kayıyor. Alt satıra iniyor. Ne yapmam lazım bozulmaması için?
2. Sorun; Diğer bir sorunum ise pencere boyutu normal iken sadece ekran küçültme yapınca hepsi kayıyor.

body {
background-color: #d5d5d5;
}

* {
margin: 0;
padding: 0;
border: 0;
}


#baris {
width: 960px;
height: 7px;
margin-left: 195px;
background-color: #fff;
}

header {
margin-left: 0px auto;
float: left;
width: 960;
height: 119px;
background-color: aliceblue;
}

header .logo {
float:left;
width: 155px;
height: 118px;
border-right: 0px solid #ff6a00;
text-align: center;
line-height: 45px;
color:black;
}

header nav {
float: left;
height: 100px;
width: 800px;
line-height:111px;
}

header nav ul {
list-style: none;
}

header nav ul li {
float: left;
margin-left: 35px;
font-weight: bold;
font-style: oblique;
font-size: 18px;
}



.cubuk {
float: left;
width: 960px;
height: 19px;
background-color: blue;
color: white;
font-weight: bold;
}

.ortasayfa {
float: left;
padding: 50px;
margin-top: 19px;
margin-left: 195px;
margin-right: 195px;
width: 860px;
height: 70px;
background-color: red;
}
.solalt {
float: left;
padding: 50px;
margin-top: 19px;
margin-left: 195px;
width: 205px;
height: 300px;
background-color: blue;
}

.sagalt {
float: right;
margin-right:195px;
margin-top: 19px;
padding:50px;
width: 550px;
height: 300px;
background-color: yellow;
}

.footer {
float: left;
padding: 50px;
margin-top: 19px;
margin-left: 195px;
width: 860px;
height: 70px;
background-color: red;
}

Çok acemiyim, css içinde gereksiz kod bulunuyor olabilir

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp bu yöntemle çözünürlüklere göre class ya id lere değer vermen gerekir. Ya da sabit px yerine % değeri kullanabilirsiniz. İlk seçenek en sağlıklısı.

Belli bir ekran boyutundan sonra istediğin divlerin genişliklerini ayarlayabilirsin, mesela ekran genişliği 400px'in altında ise .birincidiv 100px yerine 50px olarak değişir bozulmalar ve kaymaları bu şekilde düzeltebilirsin.

Örnek;

.birincidiv{
width:150px;
}

Birincidiv yazan dive normalde 150px olarak gözükmesini söyledik. Responsive ile boyutlandırdığımız zaman ise şöyle olacak;

@media only screen and (max-width:959px){
.birincidiv{
width: 100px;
}
}

Burada ise maksimum 969px ve küçük ekranlarda divin nasıl çalışması gerektiğini söylüyoruz. 959px'den küçük olan ekranlarda birincidiv 150px yerine 100px olarak gözükecektir. Bu tarz kodlarla uğraşmak istemiyorsan bootstrap kütüphanesini inceleyebilirsin, burada ki anlatımdan çok daha basit bir şekilde sadece div yazarak alanlarını kolayca konumlandırıp istediğin ekran çözünürlüğüne göre ayarlatabilirsin.

Detaylı anlatım için bu bağlantıyı inceleyebilirsin