HTML and CSS: grey overlay background on full responsive image with text

Question

I am new to HTML and CSS and trying to solve this homework problem:

Display the above full responsive image with grey overlay background on top of the image and the text must appear in the middle of the full screen view by writing code in HTML and CSS. There are two images, one smaller one for mobile which is reflectec by the <picture> element in the HTML.

I have pieced together advice from W3, here and elsewhere but cannot figure out how to fit the overlay to the image size so it does not overflow (currently overflowing on both right and left in full browser size but can see a sliver not overlayed on the right hand side when I shrink the browser window).
Here is the full code on codepen: https://codepen.io/nyck33/pen/oJZjYx

Edited to reflect suggestions in given answer:

HTML:

<div class="container">
  <div id="wrapper">
    <div class="overlay"></div>
        <picture>
            <source srcset="meBroken.jpg" media="(max-width: 600px)">
            <source srcset="macho.jpg" media="(max-width: 1500px)">
            <source srcset="meDad.jpg">
            <img src="macho.jpg" alt="macho men" style="width:auto;">
        </picture>
    <div class="centered">
        <p1 style="font-size:7vw">
            <font color="red">ACCELERATE</font> 
            <font color="white"><b>YOUR CAREER</b></font>
        </p1>
    </div>
  </div>    
</div>

CSS:

#wrapper {
    position: relative;
}
.overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

The expected result is that the overlay size matches the image size perfectly for the two different images (one for PC, one for mobile) without and overflow/underflow.

Screenshots:

The mobile size image looks like the overlay is fitting but with the larger PC size, it is still overflowing although I made the overlay a direct child of the wrapper

Answer 1

Due to the fact that you put the overlay div as a direct child of container and you set it position absolute It will not depend with the wrapper element

It will depend with the container element if it position property is set to relative.

<div class="container">
    <div id="wrapper">
        <div class="overlay"></div>
        <picture>
            ... <!-- All content of your picture tag goes here -->
        </picture>
    </div>
</div>

You can use the code which I provide above which will make the overlay to be position over the wrapper div due to the fact that it set to be positioned relatively and the overlay is direct child of the wrapper

.wrapper {
    position: relative;
    /** other css properties goes here */
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}