Survey Form Flexbox Help please

[dotdashhenry]

I am working very s-l-o-w-l-y on my survey page. I have followed up the advice given to me previously regarding my issues with spacing and margins and have attempted to apply flexbox.

https://codepen.io/dotdashdon/pen/NWRJJYd

I do have a couple of questions however:
First, please can someone take a look at how much flex-box stuff I have in css column?I feel I have done it really inefficiently. Obviously its all work in progress but before I carry I would just like a first/second opinion of what I have done so far ( yes it is rough around the edges but very much WIP).

So, I feel I understand the purpose of flexbox and its functions but am concerned I am not applying it correctly. I understand that in the html column of codepen ,I will create a class using <div but so far I am limited as to where I can apply as when I try to take a bigger section into a div/class to use for flexbox , the html analyzer tells me I am wrong.
Goodness, I have no idea if that makes sense or not. Reiterating , I am very new to this.

Second, I feel like giving up because the Name and Email and their input boxes are really close together and I cant work out in flexbox or by using margin or padding to put some space between them. Its just going to bug me really.

Thanks again for helping me before. With this attempt I have run the Html and css thought the Analyzer on codepen and this has really helped (i hope) reduce typos.
If someone could take a peek , that’d be ace. Thanks!
Link again
https://codepen.io/dotdashdon/pen/NWRJJYd

[bbsmooth]

@dotdashhenry

the Name and Email and their input boxes are really close together and I cant work out in flexbox or by using margin or padding to put some space between them.

I would revisit padding or margin again. You should be able to add space with either one. If you can’t make it work then leave/save what you have in there so we can see what you are trying to do and then we can offer suggestions.

@dotdashhenry

I will create a class using <div but so far I am limited as to where I can apply as when I try to take a bigger section into a div/class to use for flexbox , the html analyzer tells me I am wrong.

This just sounds like you aren’t adding the element correctly. Try it again and if it doesn’t work let us know and we can take a look at your codepen. Be sure to leave/save the errors in there so we can see them.

At this point, I wouldn’t worry about whether you are being “efficient” with flexbox. Get it working the way you want first. And then you can go back and refactor.

Also, I would recommend you start with a narrow-first approach. Narrow your browser as far in as it will go and style the page so it looks good at that narrow width. Then you can add break points for wider widths if needed, but to be honest, if you do it correctly you will not need any break points at all.

[dotdashhenry]

Thank you @bbsmooth . I’m carrying on working on it now…will check the element and also just carry on as I am …thanks again for replying!