HTML & CSS seems messy and all over place, can you help...

[GrumpyYoungMan]

CodePen

Can the HTML/CSS be improved/and or optimised?

[Jason Knight]

You're missing some basic semantics in there, and you're nesting of fields isn't by type. The big "flubs" to my mind is having the checkbox in the same fieldset as text fields, and using label to do legend's job.

Something more like:
https://codepen.io/jason-knight/pen/zYJRdGR?editors=1100

[GrumpyYoungMan]

You're missing some basic semantics in there, and you're nesting of fields isn't by type. The big "flubs" to my mind is having the checkbox in the same fieldset as text fields, and using label to do legend's job.

Something more like:
https://codepen.io/jason-knight/pen/zYJRdGR?editors=1100

Thanks, I appreciate that, I wasnt expecting that kind of answer to be honest, so I must be doing better...

so instead of grouping the CSS by the ID/names I should group by types?

[Jason Knight]

so instead of grouping the CSS by the ID/names I should group by types?

Saying what something IS comes in many forms. You could say that the content is "post data" or some such, but what's really going on there is you had a set of text driven fields, as opposed to checkbox/radio fields. Since checkbox and radio should in most cases have their own fieldsets anyways, say what the content markup IS, not what the content would/might be.

It's another of the subtle bits of semantics that doesn't occur to most people. It's ok to say what the content tags are. Its' ok to say what the content is. It's ok to group them by either type as appropriate.

The only thing it's not ok to say is what you want things to look like on screens.