title: Styling an <hr> tag
body: <p>I am creating a line on my html page, it goes above my navigation panel. The fiddle is below:</p>
  
  <p><a href="http://jsfiddle.net/rupsdino1997/1md3phmo/" rel="nofollow">http://jsfiddle.net/rupsdino1997/1md3phmo/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Feline&lt;/title&gt;
  &lt;link href="Styles/main.css" rel="stylesheet" type="text/css"&gt;
  
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;header id="top"&gt;
  
        &lt;h1 style="font-size:60px"&gt;L'Auberge De Napoleon III&lt;/h1&gt;
        &lt;hr style="background-color: red; height: 4px; position: relative; bottom: -23px; border:none" width="100%"&gt;
        &lt;hr style="background-color: blue; height: 4px; position: relative; bottom: -11px; left:100px; border:none" width="80%"&gt;
        &lt;hr style="background-color: purple; height: 4px; position: relative; bottom: 1px; left:200px; border:none" width="60%"&gt;                          
        &lt;hr style="background-color: orange; height: 4px; position: relative; bottom: 13px; left:300px; border:none" width="40%"&gt;
        &lt;hr style="background-color: green; height: 4px; position: relative; bottom: 25px; left:400px; border:none" width="20%"&gt;
  
       &lt;nav id="mainnav"&gt;
          &lt;ul style="border-left:green, dashed;"&gt;
            &lt;li&gt;&lt;a href="Index.html" class="thispagehome"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="Properties Features.html"&gt;Features&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="Activities.html"&gt;Activities&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="Contact.html"&gt;Contact US&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="Pricing.html"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
   &lt;/header&gt;
      &lt;h1 style="padding-top:30px" &gt;Feline - Activities&lt;/h1&gt;
      &lt;hr class="style" width="50%"&gt;
      &lt;table style="width:100%"&gt;
          &lt;tr&gt;
              &lt;td width="39%"&gt;d&lt;/td&gt;
              &lt;td width="61%"&gt;d&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;dd&lt;/td&gt;
              &lt;td&gt;dd&lt;/td&gt;
           &lt;/tr&gt;
       &lt;/table&gt;
  
  &lt;footer&gt;Footer&lt;/footer&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@charset "utf-8";
  
  body {
      margin: 0px;
      color: #151515;
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      background-color: #EFF5F8;
  }
  
  #slideshow {
      position:relative;
      height:530px;
      width:1000px;
  }
  
  #slideshow IMG {
      position:absolute;
      top:0;
      left:0;
      z-index:8;
  }
  
  #slideshow IMG.active {
      z-index:10;
  }
  
  #slideshow IMG.last-active {
      z-index:9;
  }
  
  #wrapper {
      width: 100%;
      min-width: 740px;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
      border:#6627C9;
      background-color: #FFFFFF;
  
  }
  
  #slideshow img {
    height: 100%;
    width: 100%;
  }
  
  #top {
      overflow: hidden;
  }
  
  h1 {
      font-size: 65px;
      margin-top: 0px;
      margin-bottom: 14px;
      color: #3399DD;
      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
      max-width: 100%;
      text-align: center;
  }
  h2 {
      margin-top: 0px;
  }
  
  #mainimg img {
      max-width: 100%;
      padding-top: 2px;
      padding-bottom: 2px;
  }
  h1, h2 {
      color: #3399CC;
      font-weight: 600;
      font-size: 36px;
  }
  
  .centered {
      margin-left: auto;
      margin-right: auto;
  }
  
  footer {
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 2%;
      background-color: #43a6cb;
      color: #FFFFFF;
      position: relative;
      bottom: 0px;
  }
  a {
      font-weight: bold;
      text-decoration: none;
  }
  
  a:link {
      color: #FF6600;
  }
  
  a:visited {
      color: #FF944C;
  }
  
  #mainnav a:hover  ,#mainnav a:active,#mainnav a:focus , #mainnav a.thispagehome{
      color: #FFFFFF;
      text-decoration: none;
      background-color: red;
  }
  
  #mainnav ul   {
      list-style-type: none;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
  }
  #mainnav a {
      width: 20%;
      background-color: #4D4D4D;
      text-align: center;
      text-transform: uppercase;
      color: #FFFFFF;
      padding-top: 6px;
      padding-bottom: 6px;
      display: block;
      float: left;
  }
  
  
  #wrapper #main ul.horizontal li
  {
      display: inline-block;
      list-style; none;
  }
  
  #wrapper #main .horizontal img {
      height: 250px;
      width: 200px;
      margin-top: 15px;
  }
  
  *
  {
      box-sizing: border-box;
  }
  
  #wrapper #main ul.horizontal li {
      display: inline-block;
      font-size: 16px;
      list-style; none;
      padding: 1em;
      text-align: justify;
      vertical-align: top;
      width: 25%;
  }
  
  img{
      display: block;
  }
  
  ul.horizontal {
      list-style; none;
      margin: 0;
      padding: 20;
      font-size: 0;
  }
  </code></pre>
  
  <p>Does anyone know why there is a space between my hr and nav panel? Do <code>&lt;hr&gt;</code> tags automatically have some sort of padding? Anyone know how to fix this?</p>
  
  <p>Also, if any knows how I can make it so that if you hover each link box separately that the background will be change to the colour of the hr line. (Check this link, I want it simular to that):</p>
  
  <p><a href="http://css-tricks.com" rel="nofollow">http://css-tricks.com</a> </p>