I'm looking to incorporate a small horizontal line similar to the one shown on this page. I attempted to use the <hr\> tag, but it didn't produce the desired result. Are there alternative methods for adding this line? Below is an outline of what I've tried so far to create the line, yet I haven't been successful in achieving it. Any assistance in creating the line would be greatly appreciated. Thank you.
.second-bg-cover{
background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.5)) ,url(../img/state1.jpg);
width: 100%;
height: 320px;
background-repeat: no-repeat;
position: relative;
z-index: -1;
}
.second-cover-heading {
position: absolute;
z-index: 1;
padding: 60px 0;
color: var(--white);
}
.second-cover-photo-section h1{
font-family: 'Raleway',sans-serif;
font-weight: 400;
}
.second-cover-download{
background: transparent;
color: white;
padding: 8px 18px;
border-color: var(--white);
position: relative;
z-index: 2;
}
.second-cover-download{
margin-left:580px;
margin-top: 25px;
}<div class="row">
<div class="col-md-12">
<div class="second-bg-cover"></div>
</div>
<div class="col-md-12 second-cover-heading">
<h1 class="text-center">STYLISH AXURE DESIGN</h1>
<hr style="width:80px;height:2px;text-align:left;margin-left:660px;border: 1.5px solid white; color: white;">
<p class="text-center mt-4">Use the selections you need, remove the lines you don't need.Create gorgeous prototypes faster than ever!
</p>
<div class="second-cover-download">
<button class="second-cover-download ms-5" type="button">Download</button>
</div>
</div>
</div>