NavBar appears to pass 'specs' but not automation

NavBar appears to pass 'specs' but not automation
0

#1

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?

GitHub.io Live Sample

<div id="backColor-container">
<div id="head-container">
<nav id="navbar">
        <header>
    <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
    </p>
  </header>
  <ul> 
    <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>
  </ul>

</nav>

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

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


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

CSS

* {
 box-sizing: border-box;
}
*:before,
*:after {
 box-sizing: border-box;
}
html,
body {
 color: yellow; 
 text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
 height: 100%;
 position: relative;
 background: url(https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/800px-Joy_Oil_gas_station_blueprints.jpg?raw=true) 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%;
  }
#main-doc{
  margin-top: 20%;
  margin-left:8%;
  width: 55%;
  border: double #32a1ce;
  padding: 4%;
  } 
section{
  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) {....}  */
  section{
  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(https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/800px-Joy_Oil_gas_station_blueprints.jpg?raw=true) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover; 
}

Chrome

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:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page


#2

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


#3

I know…
visually it appears to be doing that

#Layout
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.


#4

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


#5

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


#6

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.


#7

still only passing 15 out of 16


#8

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


#9

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.