How do i position/place my line underneath my header?

This is my css code: The hr line must be directly underneath the h1 heading

#Logo{
    position: relative;
      background: url(/IMAGES/Photo\ by\ aldain-austria\ on\ unsplash.jpg);
    width: 100%;
 height: 100%;
 }

 #Logo h1{
 position: absolute;
 top: 26%;
 left: 50%;
 transform: translate(-50%, 50%);
 }

The following is my html:

<div id="Logo">
   <h1>Basil Carolus</h1>
   <hr>
  </div>