Here’s my survey form: https://codepen.io/Shangnt/pen/eKgEOv
I’ve deliberately added border lines for the rows (black borders) and the classes colLeft and colRight (blue borders) because I have a question regarding the spacing.
If you reduce the browser size to 680px and below, you’ll see that the blue borders extend on the right to the edge of the pink container. This is what I can’t figure out. How can I get the blue borders to align with the black borders? The left borders don’t have the same problem.
Another question I have is how can I position the pink container in the centre of the browser when the browser is 680px and below?
Any other feedback to help me improve the coding is very much appreciated.