title: Some of my CSS doesn't work when switching to mobile view
body: <p>I wonder why some part of my CSS codes does not work in mobile view.
  See the attached image. I want to have these links (Speed Test) to the right with some spaces between the left text.</p>
  
  <p><a href="https://i.stack.imgur.com/Vp778.png" rel="nofollow noreferrer">screenshot</a></p>
  
  <p>In desktop, it's ok (there is enough space) but when it goes to the mobile view all links stick to the left text.</p>
  
  <p>Here is my <strong>HTML</strong> code:</p>
  
  <pre><code>&lt;section class="server-section"&gt;
  &lt;div id="left-server"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Las Vegas, NV&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Philadelphia, PA&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Los Angeles, CA&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Ashburn, VA&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Garden City, NY&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Chicago, IL&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="center-server"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Dallas, TX&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Denver, CO&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Bend, OR&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Phoenix, AZ&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Seattle, WA&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Boston, MA&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/us.png" alt="USA Flag" /&gt; &lt;span&gt;Miami, FL&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="right-server"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/ca.png" alt="Canada Flag" /&gt; &lt;span&gt;Canada&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/se.png" alt="USA Flag" /&gt; &lt;span&gt;Sweden&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/de.png" alt="USA Flag" /&gt; &lt;span&gt;Germany&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/nl.png" alt="USA Flag" /&gt; &lt;span&gt;Netherlands&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/ch.png" alt="USA Flag" /&gt; &lt;span&gt;Switzerland&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/icons/flags/uk.png" alt="USA Flag" /&gt; &lt;span&gt;England&lt;/span&gt;&lt;a href="#"&gt;Speed Test&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And <strong>CSS</strong> code:</p>
  
  <pre><code>@media (min-width:961px) {
  .server-section{
  padding:50px 0px 300px;
  height: 650px;
  background-color:#f8fefa;
  width:100%;
  background-image:url("../images/resource/server-location.jpg");
  }
  
  .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: #fff;
  }
  
  .server-section li a {
  float: right;
  position: relative;
  top: 20px;
  color: #00fc97;
  padding-left: 20px;
  }
  
  .server-section li a:hover {
  color: #fff;
  }
  
  .server-section li img {
  margin-right: 20px;
  }
  
  .server-section #left-server {
  float:left;
  margin-left:35px; 
  width: 30%;
  }
  
  .server-section #center-server {
  float:left; 
  width: 25%;
  margin-left:50px;
  }
  
  .clear{
  clear:both;
  }
  
  .server-section #right-server {
  float:left;
  margin-left:45px; 
  width: 28%;
  }
  }
  </code></pre>