left align header

Question

.about-header {
    width: 30%;
    display: flex;
    align-items:center;
    background-color: red;
}

.about-header hr{
    width: 70px;
    border-width: 2px;
    margin-left: 0;
}

.about-header h4{
    font-size: 30px;
    font-weight: 500;
    text-transform: capitalize;
    background-color: blue;
}

 <div class="about-header"> <hr> <h4>Our Services</h4> </div> 

no matter what i do i can't align the header next to hr. I tried text-align: left or float left but they didn't work, I used display:flex to keep them aligned, maybe it's because of that

I want to do this

Answer 1

Maybe can work if you use also margin-right: 0;