html - 如何将 span 的背景颜色设置为外部 div？

Question

我希望重置密码的背景颜色为外部 div 的最大宽度。背景颜色必须为标题部分的全宽。如何做？

html:

<div class="forgot-inner">
            <!--Forgot-header-->
                    <div class="forgot-header">
                        <div class="header">
                        <span>Reset Password</p>
                        </div>
                    </div>
</div>

CSS:

        .forgot-inner {
        max-width: 331px;
        margin: 39px auto;
        padding: 13px 24px;
        background: #fff;
        text-align: center;
        border: 1px solid #aaa;
        border-radius: 4px;
        box-shadow: 2px 11px 31px 2px rgba(0,0,0,0.2);
    }

    .forgot-inner .forgot-header .header{
        border-bottom:1px solid #aaa;
        text-align:left;
        background-color:#edefed;
        width:100% !important;
        font-size: 14px;
        font-weight: bold;
    }    

This is how it looks

Answer 1

 .forgot-inner {
        max-width: 331px;
        margin: 39px auto;
        padding: 13px 24px;
        background: #fff;
        text-align: center;
        border: 1px solid #aaa;
        border-radius: 4px;
        box-shadow: 2px 11px 31px 2px rgba(0,0,0,0.2);
    }

    .forgot-inner .forgot-header .header{
        border-bottom:1px solid #aaa;
        text-align:left;
       
        width:100% !important;
        font-size: 14px;
        font-weight: bold;
    }  

 .forgot-inner .forgot-header .header span{background-color:#edefed;}

<div class="forgot-inner">
            <!--Forgot-header-->
                    <div class="forgot-header">
                        <div class="header">
                        <span>Reset Password</p>
                        </div>
                    </div>
</div>