https://i.sstatic.net/3gSoi.pngI am a newcomer to all of this. I have a banner image and I want to position a word at the bottom center of the banner. I've tried using padding, position, and text-align, but it's not responsive - when I widen the page, the word disappears. I know I must be messing up the code big time, so if anyone could help me learn how to do this correctly, I would greatly appreciate it.
header {
width: 100%;
background-image: url(https://i.sstatic.net/3gSoi.png);
height: 405px;
background-position: center
}
#banner {
text-align: center;
padding-top: 46%;
padding-right: 20%;
font-family: 'Walt Disney Script', arial;
font-size: 100px;
color: white;
position: fixed;
}
body {
overflow-x: hidden;
}<header>
<div class="container">
<div class="row">
<div id="banner">
<p>Gramberland</p>
</div>
</div>
</div>
</header>