Hello there, hoping someone can help me or shed some light on what I’m doing wrong here. Any and all help is greatly appreciated.
So for the past few days now I have been struggling with this test, in particular, numbers 13 to 16. As well as struggling with centring some parts of the input options as well as changing their colours. Below I have attached both my CSS code and HTML code, CSS first as its shorter.
On a side note, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue. Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
Although this piece of advice doesn’t help too much unless you correct the aforementioned issues.
It’s not necessary to post your code when you provide a link to codepen.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
Now I have all of the tests passing but I’m still stuck on the presentation aspect. Each of the input boxes aren’t all aligned equally, same with the radio buttons and check boxes, as well as the text.
I know this has to do with the CSS aspect of the coding, but still at a loss as to what it is that I’m doing or not doing correctly.
Run your HTML code through the W3C validator again. Remember I said everything the browser renders belongs in the body element.
The header, the h1 and first p all get displayed by the browser so they should be in the body element.
So you know, Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The validator will show you have duplicate id's. Remember, an id must be unique within the document.
Maybe try searching for something like css fieldset styling
There’s no harm in searching. Professional developers do it daily.
On a side note, it’s very hard to read the text with the background you’ve chosen. You’ll want to look at giving some kind of background to your form_container
Last thing, you have some typo’s.
As a suggestion, you can switch the Syntax Highlighting in Codepen to help catch errors.
Go to your Codepen profile Settings → Editor Preferences (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.