title: Reduce a white gap between two <hr> tags
body: <p>I have the following menu <img src="https://i.stack.imgur.com/O3O1x.jpg" alt="menu"></p>
  
  <p>The two lines are both 'hr' tags and the menu is a div containing a ul.  I have been googling for a while now and trying adjusting the css with margin and padding but I want to reduce the white space between the lines and the text bringing them closer to the text.</p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;hr id="header_line"/&gt;
  &lt;div id="menu_bar"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Add new Form&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;View old forms&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Site Administration&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;hr id="under_menu_line"/&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#menu_bar ul {
      list-style:none;
      padding-left:0px;
  }
  
  #menu_bar ul li {
      display:inline;
      padding-left:10px;
  }
  
  #menu_bar ul li a {
      text-decoration:none;
      color:Black;
      font-family:Century Gothic;
      font-size:12pt;
  }
  
  #menu_bar ul li a:hover {
      color:#007C5A;
  }
  
  #header_line {
      margin-top:5px;
  }
  
  #under_menu_line {
      margin-top:5px;
  }
  </code></pre>
  
  <p>Any ideas?</p>