@media print（空格和分页符不起作用）

Question

问题;红色框是空白（显然不是想要的），也应该有一个分页符。 （但它不起作用）

下图显示了chrome中的打印预览。

代码：

<div class="page-layout">
                    <div class="record">                                                            
                                <div style="display: inline-block; text-align: left; width: 40% !important;">   
                                    <p><b>Name:</b> Julian</p>  
                                    <p><b>Surname:</b> Mifsud</p>
                                    <p><b>Identity Number:</b> 101899M</p>      
                                </div>              
                                <div style="display: inline-block; text-align: left; float: right; width: 40% !important;"> 
                                    <p><b>Grade:</b> example</p>    
                                    <p><b>Member Since:</b> example</p> 
                                    <p><b>Member No:</b> example</p>
                    </div>  
                    <div class="page-break">                        
                    </div>                                                                  
</div>

CSS：

@media print {  
    html, body { 
       margin: 0px !important; 
       padding: 0px !important; 
       width: 100%; 
       height: 100%; 
    }
    .page-break {       
        page-break-before: always !important;
    }
    .page-layout {
        float:none !important;
        overflow: visible !important;
        display: block !important;
        margin: 0px !important;
        padding: 0px !important;
        border: none !important;
        position: absolute;
        width: 100% !important;     
    }           
}