hr標籤根據屏幕尺寸進行響應

我使用了hr標籤。我給hr標籤30％的寬度。當我放大我的屏幕時，hr標籤的寬度保持不變。當我的屏幕寬度保持不變時。hr標籤根據屏幕尺寸進行響應

但我想基於頁面大小的響應寬度。我能怎麼做？？當我放大我想要寬度hr標籤也很小。我附上了2張圖片。首先是屏幕尺寸爲100％，第二個是屏幕尺寸爲50％我的HTML是：

 `<div class="home-page-image"> 
     <img src={{homePageImage}}/> 
     <header> 
     <h3>Refer & Earn</h3> 
     <hr width="31%"> 
     <p>Introduce a friend and get rewarded</p> 
     </header> 
     </div>`

和SCSS是

home-page-image { 
    position: relative; 
    text-align: center; 
    img { 
    height: 100%; 
    width: 100%; 
    filter: opacity(50%); 
    } 
    header { 
    position: absolute; 
    top: 25%; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    margin: 0 auto; 
    text-align: center; 
    h3 { 
     font-size: 36px; 
     font-family: 'Open Sans', sans-serif; 
     font-weight: 600; 
     text-align: center; 
     margin-bottom: -8px; 
    } 
    hr { 
     border-style: inset; 
     margin-top: 19px; 
     margin-bottom: 11px; 
     width: 31%; 
    } 
    p { 
     font-size: 18px; 
     font-family: 'Open Sans', sans-serif; 
     color: #5D5C5D; 
     font-style: normal; 
    } 
    } 
}`