How Can I position the text over the image - html

Question

I can't get the text box at the bottom to appear over the image without messing up the navigation bar
https://imgur.com/a/n2lfl57
I've tried all sorts of things and the text either just doesn't move the way I expect or messes up my navbar as I said
I'd be extremely happy if someone could help as I need to finish this in a few days for school.
here's my css code
body{
margin: 0px;
padding: 0px;
height: 100%;
}
header{
margin-bottom: -20px;
padding: 0px;
overflow: hidden;
}
footer{
background-color: black;
margin-top: : -5px;
padding: 0px;
}
.bgimage{
margin-bottom: -5px;
width: 1920px;
}
.container{
}
.imgtext{
border-style: solid;
color: white;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
.YeStage{
margin: 0px;
padding: 0px;
width: 1920px;
height: 700px;
object-fit: cover;
}
.menu {
margin-top: : -20px;
ma
padding: 0px;
background-color: #3b1113;
overflow: hidden;
list-style-type: none;
position: sticky;
top: 0;
margin-bottom: 0
border:0;
}
.Logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px
margin-bottom: 0px
width: 440px;
height: 50px;
}
.menu a {
float: left;
color: #FFFF;
text-align: center;
padding: 36px 38px;
text-decoration: none;
font-size: 17px;
}
.menu a:hover {
background-color: #f5bd0e;
color: black;
}
.menu a.active {
background-color: #f5bd0e;
color: black;
}