Left of bounding rectangle is not correct - Technical Documentation Project

Hi, everyone.

I’ve been taking the FCC curriculum for the last two months with the idea of developing my very basic HTML and CSS skills after several years of messing around with blog platforms like WordPress, Blogger, Tumblr and so on. So far the journey’s been great, but I’ve ran into a dead end on one of the Responsive Web Design Projects.

I’m currently working on the “Build a Technical Documentation Page” and I’m getting the following error while running the tests:


I don’t really understand what the error is, nor which is the “bounding rectangle” the error message refers to. While looking at the visual outcome of the code I had the impresion that the story was completed because the navbar is aligned to the left and it changes according to the screen size, and can always be visible. Could someone please help understand the mistake?

This is the CodePen I’m working on: https://codepen.io/neatdisorder/full/ePoVvb/

Thank you very much in advance!

Hi neatdisorder. The user story says the menu should display in the left half of the screen and your nav bar currently takes up 50% of the width of the screen on screens over 815px wide:

#navbar {
    position: fixed;
    margin-right: 50%;

Changing “margin-right: 50%” to “margin-right: 51%” (so that your navbar only takes up 49% of the screen seems to allow the test to pass.

However, you may find the code more intuitive if you change “margin-right: 51%” to “width: 49%”. Also, currently the text in #main-doc does not currently show on screens >815px wide so I’d suggest reducing the width of #navbar and increasing the width of #main-doc. You can check how your site looks on different size screens by using Chrome’s “toggle device toolbar”.


Hi, Umbauk.

That has solved the problem! Thank you very much for your response and for your suggestions.