Tech Doc Page Test Not Passing NavBar to the Left

HTML-CSS
1

Tell us what’s happening:
I’m getting the following error when testing my code in CodePen:

“On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left side of the screen and should always be visible to the user.
Left of bounding rectangle is not correct.: expected 0 to be below -610
AssertionError: Left of bounding rectangle is not correct.: expected 0 to be below -610”

Your code so far
My #navbar code (I’m using PostCSS, as well as B.E.M. naming conventions, then compiling it into my styles.css file. I’m using the compiled file for testing on CodePen.):

#navbar, .nav-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #333; } #navbar__header, .nav-bar__header { padding: 30px 0; color: #f2f2f2; font-size: 1.5em; } #navbar__nav-link, .nav-bar__nav-link { float: left; font-size: 1.2em; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } #navbar__nav-dropdown, .nav-bar__nav-dropdown { float: left; overflow: hidden; margin-bottom: 20px; } #navbar__nav-dropdown-button, .nav-bar__nav-dropdown-button { font-size: 1.2em; border: none; outline: none; color: white; padding: 14px 16px; background-color: #FF5733; font-family: inherit; margin: 0; } #navbar__nav-link:hover, #navbar__nav-dropdown-button:hover, .nav-bar__nav-link:hover, .nav-bar__nav-dropdown-button:hover { background-color: #ddd; color: black; } #navbar__nav-dropdown-content, .nav-bar__nav-dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } #navbar__nav-dropdown-content a,.nav-bar__nav-dropdown-content a{ float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } #navbar__nav-dropdown-content a:hover, .nav-bar__nav-dropdown-content a:hover { background-color: #ddd; } #navbar__nav-dropdown:hover #navbar__nav-dropdown-content, .nav-bar__nav-dropdown:hover .nav-bar__nav-dropdown-content { display: block; } /* Media query for Medium to Large Screens */ @media (min-width: 850px) { 
#navbar__nav-dropdown-button, .nav-bar__nav-dropdown-button {
  display: none;
}

#navbar__nav-dropdown-content, .nav-bar__nav-dropdown-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  margin: 20px 0 0 -50%; 
  position: fixed;
}

#navbar__nav-dropdown-content a, .nav-bar__nav-dropdown-content a {
  text-align: center;
  margin: 40px 0;
}
}

Your browser information:
The latest version of Chrome.

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:

2

This is because your navbar is occupying width:100%. Change it to for instance 30% and align it towards left…this should pass the test

1 Like