Child container is ignoring parent container box and margins on RHS Margins

Context: Trying to build a responsive 'Menu' for an online course I'm taking.

Problem: Cannot understand why the child containers are ignoring the constraints of the parent container on the RHS of the browser window.

Describing the solution in images: As I'm not sure where my problem lies across my index.html or style.css file, I wanted to try and describe the problem in attached images. As a newbie, I'm hoping these images will make the problem and solution obvious to more seasoned developers. See attached.

Window at ~75% (Medium Media Type), where the larger 3rd box is having the issue/problem Window at ~40% (Small Media Type), where the all 3 boxes are having the issue/problem

The solution I found was indeed something simple :-D

Could fix the problem by adding padding:

.parent-container {
    width: 100%;
    padding-right: 40px;
  }

Not sure if this is the perfect solution for all others, but is workable for some contexts.