How to Remove Top HR Line? - html

Question

I have an HR tag underneath a header; I noticed that there are actually two lines (one underneath the header and another one above it) when I only want one line underneath the header.
How can I remove the top line and keep only the bottom underline? The top line is not only unnecessary, but it messes up the website's look..
<div class="about-us-text">
<hr> <h1>We Create </h1> <hr>
<h3>PLACES THAT INFLUENCE</h3>
<p>We design places that creates a compelling, communal, environmental, and cultural impact on individuals and communities.</p>
<h3>PLACES THAT INSPIRE</h3>
<p>We design places that encourage an impassioned and spiritual connection. We regard design to be contextual – responding to its layered history.</p>
<h3>PlACES THAT INFORM</h3>
<p>Our modus operandi leverages the competence of the entire firm to consistently produce well-informed design.</p>
</div>
hr {
margin-top: -12.5px;
width: 14.3rem;
height: 1.5%;
color: black;
background: black;
border-radius: 2px;
}
.what-we-do h1{
padding-top: 80px;
font-family: interstate, sans-serif;
font-weight: 700;
font-size: 48px;
/*-webkit-text-decoration: underline 12px;
text-decoration: underline 12px;
-webkit-text-underline-position: under;
text-underline-position: under;*/
color: #300600;
padding-bottom: 25px;
}
.what-we-do h3{
font-family: interstate, sans-serif;
font-weight: 700;
font-size: 24px;
padding-top: 65px;
color: #300600;
}
.what-we-do p {
padding-top: 50px;
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-style: normal;
font-size: 18px;
word-spacing: 0.75px;
line-height: 50px;
color: #300600;
}

Answer 1

Give the upper hr a class upperhr then use #media query for your preferred screen size then set display property to none.
.what-we-do{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 94px;
}
hr {
margin-top: -12.5px;
width: 14.3rem;
height: 1.5%;
color: black;
background: black;
border-radius: 2px;
}
.what-we-do h1{
padding-top: 80px;
font-family: interstate, sans-serif;
font-weight: 700;
font-size: 48px;
/*-webkit-text-decoration: underline 12px;
text-decoration: underline 12px;
-webkit-text-underline-position: under;
text-underline-position: under;*/
color: #300600;
padding-bottom: 25px;
}
.what-we-do h3{
font-family: interstate, sans-serif;
font-weight: 700;
font-size: 24px;
padding-top: 65px;
color: #300600;
}
.what-we-do p {
padding-top: 50px;
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-style: normal;
font-size: 18px;
word-spacing: 0.75px;
line-height: 50px;
color: #300600;
}
#media only screen and (max-width: 600px){
.upperhr{
display: none;
}
}
<div class="what-we-do">
<div class="about-us-text">
<hr class="upperhr"> <h1>We Create </h1> <hr>
<h3>PLACES THAT INFLUENCE</h3>
<p>We design places that creates a compelling, communal, environmental, and cultural impact on individuals and communities.</p>
<h3>PLACES THAT INSPIRE</h3>
<p>We design places that encourage an impassioned and spiritual connection. We regard design to be contextual – responding to its layered history.</p>
<h3>PlACES THAT INFORM</h3>
<p>Our modus operandi leverages the competence of the entire firm to consistently produce well-informed design.</p>
</div>
</div>