網頁在不同屏幕上的顯示方式不同

我試圖讓我的網站顯示它的設計方式。我有一臺iMac，但是當我在MacBook Pro和我的手機上查看它時，我的某個頁面上的div損失了它們的比例，而且它看起來並不適合。這裏的鏈接到我的網頁：http://www.wintonbrownmusic.online/Music%20Site%20Beat%20Making.html 網頁在不同屏幕上的顯示方式不同

下面是我的頁面的CSS：

header, section, footer, aside, nav, main, article, figure { 
display: block; 
} 

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
text-align: center; 
} 

a { 
display: inline-block; 
width: 90px; 
text-align: center; 
text-decoration: none; 
font-family: Gagalin; 
color: #404040; 
font-size: 20px; 
} 

li { 
width: 100px; 
margin: auto; 
display: inline; 
} 

p { 
font-family: Arial; 
padding-left: 10px; 

} 

a:hover, a:active { 
padding-bottom:8px; 
background: transparent; 
border-bottom: 3px solid #FA8440; 
} 

a:active { 
color: #FA8440; 
} 

.newspaper { 
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */ 
-moz-columns: 100px 3; /* Firefox */ 
columns: 100px 3; 
font-family: Arial; 
} 

h2 { 
font-family: Gagalin; 
padding-left: 10px; 
} 

footer { 
background-color:black; 
color:white; 
clear:both; 
text-align:center; 
padding:5px; 
} 

.blurb { 
margin:5px 0 10px 10px; 
width:425px; 
height: 230px; 
background:#1a1a1a; 
border: 6px solid #4d4d4d; 
padding: 30px; 
float: right; 
font-family: Arial; 
color: White; 
padding-right:50px; 
} 

.container-fluid { 
margin: 0 auto; 
margin-left: 0 auto; 
width: 65%; 
}

我可以使用什麼代碼，我可以使用，使該頁面出現在同一個在所有瀏覽器，所有的網頁的一些援助甚至電話。

來源

2017-03-31 W. Brown

*尋求幫助調試（「？爲什麼不是這個代碼工作」）問題必須包括所期望的行爲，一個具體問題或錯誤和在問題本身中重現它所需的最短代碼。沒有明確問題陳述的問題對其他讀者無益。請參閱：如何創建[mcve]。*您有CSS，但不包含HTML。 – BSMP

有沒有想過使用像bootstrap這樣的框架來幫助處理多個設備/響應式開發？ – Cameron

這被稱爲「響應式網頁設計」，它本身不會發生。這是一個非常大的話題，通常通過使用響應式框架（如Bootstrap）和使用'@ media'查詢來實現。 – zgood