У вас есть @media (min-width: 961px) обтекание всех вашего CSS, которое говорит веб-браузеру использовать этот CSS только тогда, когда ширина окна составляет не менее 960 пикселей. Поэтому, когда вы переключаетесь на меньшее окно (не мобильное), эти стили исчезают.
Если вы удалите это, ваше форматирование вернется, даже в узком окне.
Вот пример, используя слегка модифицированную версию вашего кода. Если вы просматриваете его в полноэкранном режиме и ширина окна составляет менее 400 пикселей, зеленый фон станет оранжевым.
.server-section {
background-color: #ff9966; /* light orange */
height: 650px;
width: 100%;
}
@media (min-width: 400px) {
.server-section {
background-color: #f8fefa; /* light green */
}
}
/* After here, everything is from your code. */
.server-section ul {
list-style-type: none;
}
.server-section li {
border-bottom: 1px solid #d4d1cb;
}
.server-section li span {
display: inline-block;
padding: 15px;
color: #000;
}
.server-section li a {
float: right;
position: relative;
top: 20px;
color: #00fc97;
padding-left: 20px;
}
.server-section li a:hover {
color: #000;
}
<section class="server-section">
<div id="left-server">
<ul>
<li><span>Las Vegas, NV</span><a href="#">Speed Test</a></li>
<li><span>Philadelphia, PA</span><a href="#">Speed Test</a></li>
<li><span>Los Angeles, CA</span><a href="#">Speed Test</a></li>
</ul>
</div>
<div id="center-server">
<ul>
<li><span>Dallas, TX</span><a href="#">Speed Test</a></li>
<li><span>Denver, CO</span><a href="#">Speed Test</a></li>
<li><span>Bend, OR</span><a href="#">Speed Test</a></li>
</ul>
</div>
<div id="right-server">
<ul>
<li><span>Canada</span><a href="#">Speed Test</a></li>
<li><span>Sweden</span><a href="#">Speed Test</a></li>
<li><span>Germany</span><a href="#">Speed Test</a></li>
</ul>
</div>
</section>
В целом, я не могу говорить за большинство людей, но я бы предпочел, чтобы min-width: 960px использовался в качестве отсечки длямобильные веб-сайты (потому что это ровно половина ширины моего монитора, и мне нравится открывать два окна одновременно).