When I narrow my browser the text inputs at the top break out of the green box and the content in the green box gets very narrow. My recommendation would be to start your styling with a narrow browser (don’t use a media breakpoint, make all of the styling default for the narrow browser). Then after it looks good slowly increase the width and find a point where you want to style it differently for wider widths and create a media breakpoint there, adding styles specifically for the wider view.
In other words, start small (narrow) and then use media query breakpoints for the bigger widths.
Here are some changes to your code that I made to help your responsiveness. Hopefully it helps with other items on your page. I left some comments to help.
/*give it some opacity: 0.5 */
background-color: rgba(32, 178, 170, 0.5);
/* keeps 60% of the width of the devices screen */
/* to keep the form in center of screen use margin*/
margin: 0 auto;
padding: 20px 10px;
/* keeps boxes to 50% of container so they shrink as container shrinks */
Your form looks okay @Mohamed5. Some things you need to revisit;
When using codepen it only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.