Center and Scroll - Cuts of Content

HTML

<div class="outer">
    <div class="inner">
                <h1> This Will Be Centered Everywhere But Will Get Cut Off</h1>
       
    </div>
</div>

CSS

html, body
    {
        height: 100%;
        width: 100%;
    }
    
    body
    {
        margin: 0;
        display:flex;
    }
    
    .outer
    {
        min-width: 100%;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .inner
    {
        width: 80%;
    }