First Time Coding JavaScript From Scratch/Dev Jobs Web App

Hi Teano, first off, great attempt at this Advanced challenge, and while this probably is beyond your ability right now, I think you did great in trying to put it together. I'll try to answer your questions:

About the gray lines not stretching: I'm looking at your site through the inspector, and It looks like there's some padding in that filter container. It could be the default stylings on the form element. I suggest using a CSS reset, since it doesn't look like you have one in your CSS. I normally use Andy Bell's CSS reset, and you can easily search for that. Once you remove the padding, you can write a container class for each of the groups in that filter component, and then adding the padding there in the container.

About the <ul> and <li> not aligning: Again, this is an issue concerning padding where there's some default padding that's in your <ul> element. Try adding a padding-left: property in the <ul> selector and adjust the values accordingly. You can do the same with the <li> as well.

About dark mode: I can see that there are class selectors such as .h1-dark; ideally document.querySelector("h1") should do the trick, and then you should be able to add .classList.toggle("h1-dark"). I quickly wrote up a CodePen to show you another way to approach dark mode (link here), where I toggle the class on the parent element and then write toggle styles for the children. The key is really in how you write the CSS, and I think you can try practicing that on some easier challenges first. Once you have more practice, try this challenge again and see how you can make it better.

Good luck coding, and hope this helps!