title: Add padding before and after each line of center-aligned text
body: <p>I want this layout:</p>
  
  <p><a href="https://i.stack.imgur.com/dKT52.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dKT52.jpg" alt="Desired layout"></a></p>
  
  <p>So I tried this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;Make search awesome using Open Source&lt;/h2&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.banner .section_title h2 {
      font-family: "Oswald", Arial, sans-serif;
      font-size: 5em;
      line-height: 1.4em;
      text-transform: uppercase;
      overflow: hidden;
      text-align: center;
      display: inline;
      padding: 0 30px;
      background: #176072;
  }
  </code></pre>
  
  <p>But I am getting this result: </p>
  
  <p><a href="https://i.stack.imgur.com/vyuXQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vyuXQ.jpg" alt="Current output"></a></p>
  
  <p>So, I want to add that padding (the red circle). How can I do that?</p>
  
  <p>For the responsive design, I want this result:</p>
  
  <p><a href="https://i.stack.imgur.com/HaWtN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HaWtN.png" alt="Expected output"></a></p>