Tell us what’s happening:
I’m trying to format the #main-doc and the nav bar. I’ve noticed that when I increase the window size, the #main-doc content shifts to the left and eventually overflows into the navbar area. I added a z-index to the navbar, so the navbar ends up covering the #main-doc content when the window is enlarged. Is there a way to fix this?
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale= 1.0">
<title>Zodiac signs</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik+Glitch+Pop&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Rubik+Glitch+Pop&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header id="title">The Zodiac Signs</header>
<ul id="ul-nav">
<li><a class="nav-link" href="#Capricorn">Capricorn</a>
</li>
<li><a class="nav-link" href="#Aquarius">Aquarius</a></li>
<li><a class="nav-link" href="#Pisces">Pisces</a></li>
<li><a class="nav-link" href="#Aries">Aries</a></li>
<li><a class="nav-link" href="#Taurus">Taurus</a></li>
<li><a class="nav-link" href="#Gemini">Gemini</a></li>
<li><a class="nav-link" href="#Cancer">Cancer</a></li>
<li><a class="nav-link" href="#Leo">Leo</a></li>
<li><a class="nav-link" href="#Virgo">Virgo</a></li>
<li><a class="nav-link" href="#Libra">Libra</a></li>
<li><a class="nav-link" href="#Scorpio">Scorpio</a></li>
<li><a class="nav-link" href="#Sagittarius">Sagittarius</a></li>
<li><a class="nav-link" href="#reference">Reference</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Capricorn">
<header>Capricorn</header>
<p class="date">December 22 - January 19</p>
<p class="description">Capricorns(my dad sign) are represented by the sea goat and places huge emphasis on time. Capricorns believes that to reach the top, you need patience and dedication. These earth signs are also good at navigating between the emotional and material relms.</p>
</section>
<section class="main-section" id="Aquarius">
<header>Aquarius</header>
<p class="date">January 20 - February 19</p>
<p class="description">
Despite its root word "aqua", Aquarius is actually an air sign. Aquarius is represented by the water bearer and is the most humanitarian out of all of the zodiac signs.
</p>
</section>
<section class="main-section" id="Pisces">
<header>Pisces</header>
<p class="date">February 19 - March 20</p>
<p class="description">
This water sign is represented by two fishes swimming in opposite directions. Pisces is the most intuitive, snesitive, and empathetic sign of the entire zodiac. Pisces attention have a tendency to be divded between fantansy and reality.
</p>
<code>I don't understand the purpose of this tag, but here it is.</code>
</section>
<section class="main-section" id= "Aries">
<header>Aries</header>
<p class="date">March 21 - April 19</p>
<p class="description">Aries reperesent the ram. This Fire sign likes to be "number 1" and will dive into the most challenging situations. They will come out on top of course.</p>
</section>
<section class="main-section" id="Taurus">
<header>Taurus</header>
<p class="date">April 20 - May 20</p>
<p class="description">Tauruses are represented by the bull and are earth signs. They like to relax and alot of times are link to their love for food (Taurus Gang).
</p>
<code>Here is another code tag</code><br/>
<code>I'm pretty sure that Rihanna is also a taurus.</code>
</section>
<section class="main-section" id="Gemini">
<header>Gemini</header>
<p class="date">May 21 - June 20</p>
<p class="description">The air sign Gemini are represented by the celestial twins. This sign is:</p>
<ul>
<li>spontaneous</li>
<li>playful</li>
<li>erratic</li>
</ul>
<p class="description">You may hear people refer to this sign as "two-faced", but this is purely because of their intrinsic duality.</p>
<code>This guy that I'm having a huge problem forgetting my feelings towards is also a Gemini</code><br />
<code>I saw somewhere that Tauruses tend to be attracted to Geminis. Maybe that's why?</code>
</section>
<section class="main-section" id="Cancer">
<header>Cancer</header>
<p class="date">June 21 - July 22</p>
<p class="description">The water crab, cancer, has the ability to exist in both the emotional and material realms. This sign is highly intuitive and will do whatever it takes to protect it's emotional well-being.</p>
</section>
<section class="main-section" id="Leo">
<header>Leo</header>
<p class="date">July 23 - August 22</p>
<p class="description">Behold the infamously dramatic Leo, the lion fire sign that is king/queen of the celestial spirits. Leos love to be in the spotlight and to celebrate their personal accoplishments and life endeavours.</p>
</section>
<section class="main-section" id="Virgo">
<header>Virgo</header>
<p class="date">August 23 - September 22</p>
<p class="description">Virgos (hey, that's my mom's sign) are earth signs that are historically represented by the goddess of wheat and agriculture. It's celestial spirit is "The Virgin". Virgos are:</p>
<ul>
<li>logical</li>
<li>pratical</li>
<li>systematic</li>
</ul>
<p class="description"> in their approach to life. They tend to be perfectionist who like to improve their skills through consistent practice.</p>
</section>
<section class="main-section" id="Libra">
<header>Libra</header>
<p class="date">September 23 - October 22</p>
<p class="description">Like their celestial sign (the scale), Libras are all about balance, harmony, and justice. This air sign is obsessed with symmetry and will strive to achieve balance in all aspects of their life.</p>
</section>
<section class="main-section" id="Scorpio">
<header>Scorpio</header>
<p class="date">October 23 - November 21</p>
<p class="description">Represented by the scorpion, Scorpios tend to be the most misunderstood out of all of the zodiac signs. This water sign uses emotional energy as fuel and derives it's courage from it's psychic abilities.</p>
</section>
<section class="main-section" id="Sagittarius">
<header>Sagittarius</header>
<p class="date"> November 22 - December 21</p>
<p class="description">Sagittarius(Les Twins sign) is represented by the Archer, and is the last of the fire signs. This fire sign strives for adventure whether its spiritual, intellectual, or geographical. Sagittarians are always on a quest for knowlegde.
</p>
</section>
<section class="main-section" id="reference">
<header>Reference</header>
<p class="description">Please refer to the following website <a href="https://www.allure.com/story/zodiac-sign-personality-traits-dates" id="zodiac_link">here</a> for more information about the zodiac signs</p>
</section>
</main>
</body>
</html>
CSS
*{
box-sizing: border-box;
line-height: 1.5;
scroll-behavior: smooth;
margin: 0;
padding: 0;
}
/* General CSS*/
body{
display: flex;
flex-direction: column;
background: #060417;
}
header{
font-size: 1.5em;
color: black;
}
code{
display: block;
background:linear-gradient(90deg, rgb(4, 2, 33), rgb(50, 47, 99), rgb(184, 182, 222));
color:white;
padding: 20px;
margin: 15px;
line-height:2;
width:80%;
border-radius:10px;
}
/*Navbar CSS*/
#navbar{
display: flex;
flex-direction: column;
position: fixed;
left:0;
top: 0;
width: 25%;
height: 100vh;
border-right: 1px solid white;
background: url(https://images.pexels.com/photos/998641/pexels-photo-998641.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
overflow-y: auto;
z-index: 1;
}
#navbar > header{
text-align: center;
top: 0;
font-size: 2em;
color: white;
font-family: 'Rubik Glitch Pop', system-ui;
}
.nav-link{
text-decoration: none;
display: block;
border-top: 1px solid white;
padding: 12px 25px;
text-align: center;
font-size: 17px;
color: white;
font-family: 'Gamja Flower', sans-serif;
cursor: pointer;
transition: text-indent 0.4s ease-in-out;
}
.nav-link:hover{
color: #939bed;
margin: 2px 0;
box-shadow: 5px 5px 15px 2px #908da6;
text-indent: 10px;
}
/*Main Doc CSS*/
#main-doc{
display: flex;
flex-direction: column;
position: absolute;
margin-left: 300px;
height: 100vh;
width: 75%;
}
section > header{
font-size: 1.9em;
text-decoration: underline;
color: #908da6;
font-family: 'Gamja Flower', sans-serif;
}
section li{
color: white;
margin-left: 60px;
font-family: Georgia, sans-serif;
}
.main-section{
margin-bottom: 20px;
}
.date{
font-style: italic;
font-size: 0.8em;
}
p{
color: white;
font-family: Georgia, sans-serif;
font-size: 1.1em;
}
.description{
text-indent: 20px;
}
#zodiac_link:link{
color: #908da6;
}
#zodiac_link:hover{
color: #3ef7eb;
}
#zodiac_link:active{
color: #3ef7eb;
}
#zodiac_link:visited{
color: #dd51f0;
}
/* media query */
@media only screen and (max-width: 816px){
body{
min-height: 100vh;
height: 75%;
bottom: 500;
display: flex;
flex-direction: column;
}
#navbar{
width: 100%;
height: 50%;
top: 0;
z-index: 999;
position: absolute;
}
#main-doc{
margin-top: 300px;
margin-left: 10;
}
.main-section > header{
text-align: center;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page