To align your custom frames with the photo strip in your photobooth web application, it's essential to ensure that both the frames and the images share the same reference point within their container. First, set the .photo-strip container to position: relative; to establish it as the reference point for absolutely positioned child elements. Next, position the .frame-overlay absolutely within the .photo-strip container, aligning it to the top-left corner by setting top: 0; and left: 0;. Ensure that the .frame-overlay has the same width and height as the .photo-strip container to maintain proper alignment. Additionally, verify that your custom frame images match the dimensions of the .photo-strip container. By ensuring that both the frame overlay and the images share the same positioning context and dimensions, they should align correctly within the .photo-strip container.