Mobile-first solution using CSS Grid and Flexbox

1. First of all, you can start from now on compiling your html tags with the semantic HTML format and you can find it on google, on youtube or on MDN Web Docs. Because this is very vital in a web so you have to start from now learning it and implementing it from now on.
2. You can remove the default padding and margin from the browser by adding styles to *, *::before, *::after of the form padding: 0 and margin: 0.
3. Give margins for the vertical and horizontal axes so that the newslatter-modal class does not stick to the side of the browser when on mobile screen.
4. For desktop screen size it looks good, but for mobile size there is still something you have to add which is margin. Add it to your media queries.
5. Likewise with the success-modal class, provide margins for the vertical and horizontal axes at mobile screen. Add it to your media queries as well.

But you've done your best, the rest is to stay consistent and keep practicing by doing small challenge projects (don't watch too many tutorials without hands-on experience) first from this website or from other websites or from other sources. Have a nice day mate! 😊