title: CSS - positioning a horizontal line
body: <p>I'm trying to position a horizontal line on a section for a site I'm building and can't get it in the correct place. This is a Photoshop version of how it should look -
  <a href="https://i.stack.imgur.com/ee0DI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ee0DI.png" alt="PSD version"></a></p>
  
  <p>This is my coded version  - 
  <a href="https://i.stack.imgur.com/UwHEW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UwHEW.png" alt="Coded version"></a></p>
  
  <p>I'm using the <em>hr</em> tag to create it as this seems the most straightforward way - here's the code -</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>hr {
  
      display: block;
      width: 250px;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      margin-left: auto;
      margin-right: auto;
      border-style: inset;
      border-width: 1px;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css" rel="stylesheet"/&gt;
  
  &lt;section id="welcome"&gt;
         &lt;div class="container"&gt; 
              &lt;div class="row"&gt;
                  &lt;div class="twelve columns"&gt;
                  &lt;h4&gt;WELCOME TO FEATURE MEDIA&lt;/h4&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.&lt;/p&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
                  &lt;hr&gt;
              &lt;div class="row"&gt; 
                  &lt;div class="four columns"&gt; 
                      &lt;div id="video"&gt;      
                          &lt;h3&gt;VIDEO&lt;/h3&gt;
                          &lt;img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="four columns"&gt; 
                      &lt;div id="blog"&gt;   
                          &lt;h3&gt;BLOG&lt;/h3&gt;
                          &lt;img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;"&gt;
                      &lt;/div&gt;    
                  &lt;/div&gt;
                  &lt;div class="four columns"&gt; 
                      &lt;div id="faq"&gt; 
                          &lt;h3&gt;FAQ&lt;/h3&gt;
                          &lt;img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;"&gt;
                      &lt;/div&gt;   
                  &lt;/div&gt;&lt;hr&gt;
              &lt;/div&gt;        
          &lt;/div&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>