Is there a way to center this H1 at the bottom of the div?

Nothing I've tried really works I need simple code I can use to make it be on the bottom of that div instead of making the whole div a grid and just making the grid at the bottom house the text. I'm new to html/css so I only know what's really on the page to be honest. The vertical align-bottom isn't working either...

<!DOCTYPE html>
<html>
<head>
    <title>Making a Shop Landing Page</title>
</head>
<style>
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
body{
    background-color:#eee;
}
main{
    height:100%;
}
html, body {
    height:100%;
    margin:0;
}
.container{
    display:grid;
    grid-template-areas:
        "header header header"
        "ads main main"
        "footer footer footer";
    height:100%;
    width:100%;
    grid-template-rows:20% 70% 10%;
    grid-template-columns:20% 80%;
}
.grid-item{
    border:black solid 3px;
}
.header{
    grid-area:header;
}
.ads{
    grid-area:ads;
    width:100%;
}
.main{
    grid-area:main;
    height:100%;
}
.footer{
    grid-area:footer;
}
#navbar {
    height: 100px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #eee;
    padding: 0;
    margin: 0;
    border:black solid 2px;
}
#header{
    text-align:center;
    vertical-align:bottom;
}
</style>
    <body>
    <main>
        </div>
        <div class="container">
            <div class="header grid-item">
                <h1 id="header">This is the Title</h1>      
            
            </div>
            <div class="ads grid-item"><p>awdsmapwdsmaswdpawmda wdawpmds awpdsmawp dmaw </p></div>
            <div class="main grid-item">
                <h1>awdawdaswdawd awdasw daw dsawd awd aw dawd awda dwa daw daw wdaw;lds anmw;dsnaswsd nwa;lds naw;kd nwa;ds naw;dn aw awdknawidgawpidhawd'ajdswn'awnda'swnda'wdnasw'dnaw'dnawds'awndanlw'dl </h1>  
            </div>
            <div class="footer grid-item"></div>
        </div>
    </main>




    </body>
</html>

Solution

For making it be at the bottom of your div, you can make the container that it is in position relative and then your text to be positioned absolute and put it where exactly where you want to

.header{
  position: relative;
}

#header{
  position: absolute;
  bottom: 0px;
  left: 50%;
}