NavBar appears to pass 'specs' but not automation

I know there’s still a lot I could do to the Nav Menu, but I’m curious why it doesn’t pass the automated testing as it is? Live Sample

<div id="backColor-container">
<div id="head-container">
<nav id="navbar">
    <h1 id="title">Framing,<br/>Finishing<br/>& Functionaly</h1><!-- Write your comments here -->
    <p id="description">
     how to build a website<br/>like a house
    <a class="nav-link" href="#building_Codes" rel="internal"><li>building Codes</li></a>
    <a class="nav-link" href="#WATER,_WASTE_&_ELECTRICITY" rel="internal"><li>Water, Waste & Electricity</li></a>
    <a class="nav-link" href="#Framing" rel="internal"><li>Framing</li></a>
    <a class="nav-link" href="#Finishing" rel="internal"><li>Finishing</li></a>
    <a class="nav-link" href="#Functionaly" rel="internal"><li>Functionaly</li></a>


</div><!-- id="id="head-container" on line 2-->

<main id="main-doc">
  <section class="main-section" id="building_Codes">
    <header>building Codes</header>

  <a href="#Codes" rel="link">Copyright 2018,</a>
</div><!-- id="id="backColor-container" on line 1-->


* {
 box-sizing: border-box;
*:after {
 box-sizing: border-box;
body {
 color: yellow; 
 text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
 height: 100%;
 position: relative;
 background: url( no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover; 
a {
 color: yellow; 
 text-shadow: 4px 4px 10px rgba(0, 0, 0, 1); 
#backColor-container {
  background-color: rgba(0, 0, 100, 0.6);
#head-container {
    display: flex;
    flex-direction: reverse;
#navbar {  
    width: 100%;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
     }/* navbar */
header {
  width: 70%;
  font-size: 2.5em;
  text-align: right;
  float: right;
  margin-right: 5%;
  margin-top: 20%;
  width: 55%;
  border: double #32a1ce;
  padding: 4%;
  margin-top: 25px; 
  padding: 2%;
  border: 2mm ridge rgb(333, 333, 333, .6);
  background-color: #AD66D5;
  font-size: 1.3em;
  text-align: justify;
  -webkit-box-shadow: inset 10px 10px 72px 3px rgba(0,0,0,0.6);
-moz-box-shadow: inset 10px 10px 72px 3px rgba(0,0,0,0.6);
box-shadow: inset 10px 10px 72px 3px rgba(0,0,0,0.6);
  background-color: #1565C0;
  font: 'Open Sans';
code {
  background-color: #1565C0;
  font: Inconsolata;
  color: white;
@media (max-width: 1250px) {
      /* @media (width <= 30em) {....}  */
  margin-top: 15px;
  border: 1mm ridge rgb(333, 333, 333, .6);
} /* end of media query 1250px */
footer {
 position: fixed;
 bottom: 0;
 width: 100%;
  background: url( no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover; 


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

Link to the challenge:

Click on the red button after you run the tests, it will list your errors, and what is wrong with it.

I know…
visually it appears to be doing that

1. 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.

The left side of the box is going off the page. try setting a width on the container and set your left position.

1 Like

I also added a border so I can tell where the NavBar is at… I’ll delete it later, but it’s still failing

I gave your navbar the red border. As you can see it is occupying 100% width. This is because you have set your navbar width to 100%.
change it to for instance 30%, and you will pass the test sd the navbar would be towards the left.

You would need to realign your design though.

1 Like

still only passing 15 out of 16

set width less then 50%, even 49% would be ok.

ok, finally got it… didn’t expect 1 percent to change it that much. Now that I got the spec I can go back to looking at the appearance.