Critique and Help on Survey Form Project

Hello, this is my first completed (almost) project on FCC and my web development journey. I’m still trying to get a grasp on the form attribute and the basics of CSS. I am still getting used to positioning objects on the webpage and actually borrowed some things form FCC’s Survey Form to get some stuff positioned right.

This is what my Survey Form looks like so far.

I am having trouble with a couple of things…

  1. When hovering over the input and radio elements there are weird lines that appear around the elements. What causes this and how do I get rid of them?

  2. My input forms go beyond the parent element and do not adjust when resizing the browser or viewing on mobile. How do I make the input fields adjust accordingly?

I appreciate any help/critique I can get. I’ve been learning HTML/CSS over the last 2 months while working full time and 3 kids at the house. It has been hard but I really am enjoying web development and am eager to learn and improve.

lol vary nice “only in the comfort of my own home!”

Shrink your browser width down to mobile size and you will see that your text fields are not responsive.