title: Putting a max-width and aligning text in the middle of parent
body: <p>In one of my row's I'd like to put a max width and center my text within that div.</p>
  
  <p><strong>My homepage text currently looks like:</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/lXWhz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lXWhz.jpg" alt="Current"></a></p>
  
  <p>I'd like to put a max width and center the text within this one section.</p>
  
  <p><strong>Ideal outcome:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/eLLAL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eLLAL.jpg" alt="Desired outcome"></a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.homepage-text {
      font-size: 130%;
  }
  
  .light-section {
        background-color: lightblue;
      /* color: white; */
          text-align: center:
      }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>      &lt;div class="row light-section"&gt;
        &lt;div class="col-sm-12"&gt;
      &lt;div class="col-sm-12 homepage-text"&gt;
  
  &lt;p&gt;Text sit's here&lt;/p&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Live Link:</strong> <a href="http://185.123.97.138/~kidsdrum/moneynest.co.uk/" rel="nofollow noreferrer">http://185.123.97.138/~kidsdrum/moneynest.co.uk/</a></p>