header {font-weight: bold; font-size: 50px;}
article {font-size: 30px;}
p {font-size: 20px;}
#nav-bar {position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-right-color: currentcolor;
border-color: rgba(0, 22, 22, 0.4);
}<main id ="main-doc">
<section class="main-section" id = "introductions">
<header id ="introductions"> Introductions </header>
<article> This is words and stuff</article>
<p> This is the P1 text</p>
<p> This is the P2 text</p>
<li>This is the 1st list<li>
<code>This is code one</code>
</section>
<section class="main-section" id ="article1">
<header id ="article1">Article1</header>
<article> This is the first article's text</article>
<p>This is the P3 text</p>
<p>This is the P4 text</p>
<li>This is the 2nd list</li>
<code>This is code two</code>
</section>
<section class = "main-section" id = "article2">
<header id = "article2"> Article2</header>
<article>This is the seconds article</article>
<p>This is the P5 text</p>
<p>This is the P6 text</p>
<li>This is the 3rd list</li>
<code>This is code three</code>
</section>
<section class = "main-section" id = "article3">
<header id = "article3">Article3</header>
<article>This is the third article text</article>
<p>This is P7 text</p>
<p>This is the P8 text</p>
<li>This is the 4th list</li>
<code>This is code 4</code>
</section>
<section class = "main-section" id = "article4">
<header id = "article4">Article4</header>
<article>This is the fourth article tect</article>
<p>This is the P9 text</p>
<p>This is the P10 text</p>
<li>This is the 5th list</li>
<code>This is code 5</code>
</section>
<nav id ="nav-bar">
<a href="#introductions" id="introductions">Introductions</a>
<a href= "#article1" id="article1">Article1</a>
<a href="#article2" id="article2">Article2</a>
<a href="#article3" id="article3">Article3</a>
<a href="#article4" id ="article4">Article4</a>
</nav>
Hello! I am currently tackling a Free Code Camp project and require some assistance with repositioning the main page relative to the side navigation bar. My goal is to prevent overlap between the main content and the sidebar by adjusting their positioning. Additionally, I need assistance in aligning the list elements of the navigation bar vertically instead of horizontally. Any guidance or suggestions would be greatly appreciated.
I will share the link to the page for reference.