App Academy

Issue with HTML/CSS Assessment specification

Hello. I submitted my HTML/CSS assessment and received a 9/12 score. I’ve solved the first two issues, I believe. But the final one “has a ‘form’ element that is 600px when the window is wider than 600px”

I think I have the form itself at 600px, but the way it’s rendering on the site is thoroughly puzzling me. During testing, there was a margin between 600 - 615px where the form would resize with the screen. I’ve managed to adjust it to a fixed position, but now the left-side margin of the form creates enough space to make it appear as if the form itself is larger than 600px when when the screen is 600px. I don’t have any margins or padding added to any styling relative to the form. I’m concerned this could result in another failed attempt and I’m almost at my limit for failed attempts. Was wondering if I could get any insight on this issue, if it is even an issue(?).

Please see my CSS code below for reference. Thanks in advanced!

Learning Challenge

Question

Hi, and welcome to the forum!

Without seeing all of your code, I suspect that the issue may be coming from the element that you are applying the form width styling to. I would recommend applying the max-width and width attributes directly to the form element, rather than applying them to the container class. I suspect that by not directly applying those sizes to the form itself, you have run into some borders or padding from other nested elements.

Try applying those values to the form itself, and let us know if that changes anything visually when you test it in the browser.

Jesse

1 Like

Good morning! Thanks for the help with this. After reading your response, and re-reading the hints and assessment specs provided regarding the width issue, I adjusted the code to include the form element as you’ve recommended, because it was indeed originally a part of the original specification along with the 600px width spec… I missed that part. I submitted the code after testing, and passed!

1 Like