My code is failing only one test - " None of your header elements should be empty."
I saw several other forum posts about this and most seemed to be related to the CSS. I removed all my CSS code and re-ran the tests, but that one test still failed. To identify the problematic header, I removed each header element in my code, one at a time, and ran the tests, then repasted the header back in, but it still failed each time. I then removed all my code, and pasted it back into the test, but it still failed. Is anyone able to look at this and see what the issue is?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<header id="header">
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title id="title">Technical Specs</title>
</header>
<main id="main-doc">
<nav id="navbar">
<header class="navhead">Couches</header>
<a class="nav-link" href="#Couch_Legs">Couch Legs</a>
<a class="nav-link" href="#Couch_Base">Couch Base</a>
<a class="nav-link" href="#Cushions">Cushions</a>
<a class="nav-link" href="#Comfortability">Comfortability</a>
<a class="nav-link" href="#Couch_Accents">Couch Accents</a>
</nav>
<section class="main-section" id="Couch_Legs">
<header>Couch Legs</header>
<p><code></code></p>
<p>There should be at least four legs on each couch</p>
<p>There can be three or fewer legs if the couch is designed in such a way that it balances in an amazing fashion, and keeps that balance when someone sits upon the couch</p>
</section>
<section class="main-section" id="Couch_Base">
<header>Couch Base</header>
<p><code></code></p>
<p>The couch base should attach to all four legs and should be sturdy enough to hold the weight of the cushons and anyone sitting on them</p>
<p>the couch base should also have springs to make it more comfortable</p>
</section>
<section class="main-section" id="Cushions">
<header>Cushions</header>
<p><code></code></p>
<p>The cushions should be plush but not cause a person to sink in</p>
<p>The cushions should also cover the entire base</p>
</section>
<section class="main-section" id="Comfortability">
<header>Comfortability</header>
<p><code></code></p>
<p>The couch should be comfortable</p>
<p>If the couch isn't comfortable - the couch isnt worth it...unless it's free...in which case its worth is still questionable<p>
</section>
<section class="main-section" id="Couch_Accents">
<header>Couch Accents</header>
<p><code></code></p>
<p>A couch can be accented by additions which can be made</p>
<p>Accents include, but are not limited to:
<ul>
<li>Pillows</li>
<li>Blankets</li>
<li>Embroidery</li>
<li>Carvings (legs)</li>
<li>More pillows</li>
</ul>
</p>
</section>
</main>
</html>
/* file: styles.css */
#navbar{
background-color: 0F187E;
border: 4px solid
}
a{
color: white;
border: solid 1px grey
}
.navhead{
color: grey;
font-size: 32px
}
#main-doc{
background-color: grey;
color: 000000;
font-size: 20px
}
.main-section{
border: solid 3px;
margin: 5;
}
header{
font-size: 27px;
text-align: center;
color: 04374F;
font-weight: bold;
}
@media (min-width: 414px){
#navbar{
width: 20%;
float: left;
height: 100%;
}
}
@media (min-width: 414px){
.nav-link{
display: inline-block;
margin: 5px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: