title: How to make <hr> tag responsive?
body: <p>I made a page using html css and bootstrap. And i am having problem with the horizontal line tag. Need help to fix this when window size changes to extra small</p>
  
  <p>when I give the hr tag 400px it works well in the full screen but when the screen size is reduced to mobile size that is below 500px it doesn't look nice so i tried with 90% width then it works fine for extra small screen but when then screen is small or above it takes up more space horizontally which i don't want.</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>body {
    color: white;
    font-family: Lato;
    background: url(purrfectimage.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  
  #content {
    text-align: center;
    padding-top: 25%;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
  }
  
  hr {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
  
  h1 {
    font-weight: 700;
    font-size: 5em;
  }
  
  html {
    height: 100%;
    width: 100%;
  }
  
  .custom-toggler.navbar-toggler {
    border-color: rgb(255, 255, 255);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
    &lt;meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no;"&gt;
  
    &lt;title&gt;Purrfect Match&lt;/title&gt;
  
    &lt;link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" href="
      https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="purr.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
          &lt;div id="content"&gt;
            &lt;h1&gt;Purrfect Match&lt;/h1&gt;
            &lt;h3&gt;The Only Human-Feline Dating App&lt;/h3&gt;
            &lt;hr&gt;
            &lt;button type="button" class="btn btn-light btn-lg"&gt;&lt;i class="fa fa-paw" aria-hidden="true"&gt;&lt;/i&gt; Get Started!&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I actually wanted that when i resize my window the horizontal line should appear the same as it was appearing for full window or even for small break-point.</p>