title: More efficient/appropriate way to write this code?
body: <p>So I have just recently started learning about responsive web design and using media queries in my CSS. I've gotten it to where I understand how to make things responsive and optimized decently for phones.</p>
  
  <p>If anyone is just bored or would be interested in looking at this, could you maybe tell me if I'm on the right track or if I'm breaking any serious coding rules? Ha. </p>
  
  <p>Here's a portion of what I'm working on: (this is referring to the little box that moves, just ignore the background)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
    
    .three img {
     position: relative;
      top: 0;
    }
    
    #shoutout{
      position: absolute;
      margin: 40% 45%;
      border: 2px solid black;
      background-color: white;
      padding: 7% 14%;
      z-index: 1;
    }
    
    .sotext p{
     font-size: 120%;
      font-weight: bold;
      text-align: center;
    }
    
    @media screen and (max-width: 1023px){
       #shoutout{
         text-align: center;
         font-size: 75%;
         margin-top: 40%;
      }
      
      .sotext p{
         text-align: center;
         font-size: 100%;
      }
    }
    
    @media screen and (max-width: 740px){
      #shoutout{
         text-align: center;
         margin-top: 35%;
         margin-left: 45%;
      }
      
      .sotext p{
         text-align: center;
         font-size: 60%;
      }
    }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;!-- Header Placeholder--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    
    &lt;div&gt;
      &lt;section id="shoutout"&gt;
          &lt;!-- shoutut box --&gt;
            &lt;div class="sotext"&gt;
              &lt;p&gt;Placeholder Text&lt;/p&gt;
            &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class="three"&gt;
        &lt;img       src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/575d8fed4d088eb0ab810e52/1465749487419/mother_daughter.png" alt="shoutout image" /&gt;
      &lt;/section&gt;
    &lt;/div&gt;
    
  &lt;body&gt;</code></pre>
  </div>
  </div>
  </p>