My solution using HTML and CSS

Congratulations well done. Just a few thing you can fix.

• The image overlay is a bit bigger than the image in the height

}.l-main{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
/*   width: 100vw; */ /* you don't need this */
  min-height: 100vh; /* use min height instead, when applying height you are fixing the height and with min height the will grow with the content on the page */
}
.l-container{
/*   padding: 0 16px; */ /* this will create a overflow when screen size is 376px. you don't need this */
}
``