Left of bounding rectangle is not correct.: expected 8 to be below -527.4000244140625

HTML-CSS
1

Can someone explain the correct code or what I’m doing worng for the Technical Documentation Page project task? The task states “On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content”

<style>

  #navbar {
    position: relative;
    text-align: left;
    margin-right: 40px;
    position: fixed;
    width: 16%;
  }

</style>
2

You’ve given it a small margin in from the right, and a tiny width of 16% of the viewport. So it’s never going to actually be flush to the left unless the viewport is about 40px wide, and once the viewport gets around 120px wide it’ll stop even being on the left hand side, it’ll always be just under. Not sure why you’ve tried to do it this way (trying to get it as close to the center as possible), it much easier to just stick it to the left.

3

it’s just a layout. Not actual measurements i expected to work. I was trying to figure out the layout I should be using and what measurements I should be using as well.

4

Well, what you currently have can’t be correct, you need to actually check it:

Say viewport is 120px wide (I mean, that’s an unfeasibly small width, bit it is the point at which you start to fail the left hand side test):

16% of 120px is 19.2px
40px + 19.2px is 59.2px. That’s how wide the element is + margin.
The midway point of the viewport is 60px.
Your element is positioned in from the right, so 120 - 59.2 is 60.8px. That’s the left hand edge of your element, so it’s clearly on the right hand side.

That’s at a very small viewport size, and you can do that with any number. What I meant is that if it’s supposed to be positioned on the left, you’ve made the calculation very complicated (instead of positioning it on the left, you’ve instead tried to push it from the right). Also, mixing % and px sizes makes it literally impossible for you to accurately figure out sizes given the viewport can be any width a user wants.