Arkadaşlar cevaplarınız için teşekkürler ben yapabildim . Merak eden arkadaşlara şunu söylemek isterim :
Çok dikkat ederek bakalım kodlara ve temeli iyi anlayıp kavrayalım . Ufak bir dikkat hatası her şeyi karıştırabiliyor.

ben en son düzelttim ıphone da huawei de düzgün ama samsung a 10 s var bende onda düzgün görünmüyor neden acaba ?

İyide her zaman gizli sekmemi kullanacağım? Benim sorum şu : Dosyaların hatalı yüklenmesi sunucu kaynaklı olabilir mi?
çünkü normalde pcden chrome ile bakınca telefon boyutuna sorun yok ama telefondan bakınca hataklı gösteriyor .

Tarayıcı her sayfayı açtığında css dosyanı yüklemez.
Yüklemesi için tarayıcının gizli sekmesini kullan veya

<link rel="stylesheet" href="styles.css?v=1">

?v=1 gibi her değişiklik yaptığında değeri arttırarak dosyanın herkes için yeniden yüklenmesini sağlayabilirsin.

ücretsiz aldım . Ben başka bir domain üzerinden alsam da aynı hatayı verir mi ? Yani sunucu kaynaklı mıdır ? olabilir mi

Eğer local de sorunsuz sunucu da sorunlu olduğunu düşünüyorsanız firmaya yazın

% yapıyorum . pcden googledan açıyorum sorun yok ama telefondan açıyorum düzenli değil hatta güncelmi onu bile anlamadım belkide doğru yapıyorum ama göremiyorum
yani sunucu güncellemiyor olabilir belki ama birkaç telefondan da girdim aynı gösteriyor.
divler oturmamış bir şekilde . Ama o kadar şey girmeme ragmen nasıl etkilemiyor anlamadım
Çünkü bilgisayardab açınca düzgün bir şekilde giriyor hem boil olarak hem de tablet

Hocam vaktim olsa inanın size yardımcı olurdum. Bu işin media etiketleri dışında bir yolu yok. Sadece tahmin ediyorum. Genişlik ve yükseklikleri % ve vh ile yapıyorsunuz değilmi.

Ya ben yapamadım halen bu hafta teslim etmem gerekiyor lütfen yardım eder misiniz media
etiketleri ile de yaptım ama divler oturmuyor . Dosyaları atsam bakar mısınız ya da yardımcı olur musunuz ?

Bootstrap (http://getbootstrap.com) kendi içerisinde tanımlanan classları ile gayet başarılı boyutlandırma sağlıyor
Bootstrap mantığı aslında çok basit col(column)md(screen resolutions)8(parting) ile çalışıyor
bir div açtığınızda onu kek dilimler gibi dilimliyor max 12 dilim.
diyorsunuz ki küçük cihazda 4 e böl büyükte 3 e çok büyükte 2 ye mesela

• // Extra küçük ekran / telefon
• xs: 0,
• // Küçük ekran / telefon
• sm: 576px,
• // Orta büyüklükte ekran / tablet-pc
• md: 768px,
• // Büyük ekran / pc
• lg: 992px,
• // Extra büyük ekran / pc-tv
• xl: 1200px
  Aslında medya etiketleri ile uğraşmamak ve olası çakışmaları önlemek için yapılmış web alanında neredeyse herkesin kullandığı bir şey
  Mantığı için birçok video var inceleyip kullanabilirsiniz.

Selam. Bootstrap değil de doğrudan siz kendi ızgara sisteminizi yazabilirsiniz ama çok uzun ve zorlu olur bu nedenle şunu belirtmek isterim;

Mesela diyelim ki iphone'yi baz alarak düzenleme yapacaksınız bu durumda tek ihtiyacınız olacak şey ölçüler. Örnek genişlik 320px olduğunu varsayalım ve 370px genişliğine geldiğinde farklı bir reaksyon göstermesini isteyeceksiniz zira farklı bir ekran boyutunu illa ki düşünmek durumundasınız.
O halde;

@media(min-width: 320px) and (max-width:370px) {

buraya kaynak kodunuzu yazmalısınız. Örnek veriyorum h1'in 30 px'den 15 px'e düşmesini istiyorsunuz bu durumda:

.h1 {
font-size:15px !important;
}

}

Yukarıdaki kod satırını amacınıza ve ekran çözünürlüklerine göre düzenlerseniz istediğiniz ekrana göre istediğiniz ayarlamayı yapabilirsiniz. Yok olmasını istediğiniz divi yok eder (display:none veya opacity:0), veya yerine farklı bir div getirtebilirsiniz. Umarım açıklayıcı olmuştur.

Cevap için teşekkür ederim fakat media etiketleri ile olmuyor . Ben denedim baya uğraştım ama iphone da açıyor ise samsung da açmıyor veya düzgün görünmüyor
iphone 320 ise samsung 400 ya örnegin iphone da dügün görünmüyor işte ben yapamıyorum yani o kadar da video izledim . Büyük firmalar nasıl yapıyorlar acaba ?

Uzman arkadaşlar daha iyi bilgi verebilirler ama kendi düşüncemi söylersem bootstraptan önce @media (max-width) ve (min-width) olayını çözmeye çalışmalısın
burda kafana yatınca bootstrap daki col-md col-xs col-lg bunların farkını anlayacaksın zaten bunun için de youtube dan video izleyerek çözebilirsin Tayfun Erbilen,
Arin yazılım, Fehmi Uyar kanallarında kesin bulursun ama 2 kelimeyle ben anlatayım kafanda yer edinsin

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

    

</body>
</html>

/* Örnek olarak min-with dediğinde genişliği 1500px ve üstüne etki etsin demiş olursun */
@media (min-width: 1500px) {
  body{
      
      background-color: purple;
  
  }
}

/* max-with dediğinde ise genişliği 500px ve altına etki etsin demiş olursun */
@media (max-width: 500px) {
  body{
      
      background-color: yellow;
  
  }
}

/* Burda ise genişliği 1200px'den aşağı ve 800px'den yüksek kısımları alır */
@media (max-width: 1200px) and (min-width: 800px) {
  body{
      
      background-color: orange;
  
  }
}