Tell us what’s happening:
While working on the Technical Document cert. project I’ve created a nav bar on the left side similar to the demo page. My problem is that when i resize the preview page window and have the option to scroll horizontally, the text of the main section on the right will scroll and overflow into the nav bar on the left. I’ve tried many suggestions from google to no avail. I think there’s a more fundamental problem I’m not seeing. Apologies for sloppy code, I’m a beginner.
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charsetf="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main id="main-doc">
<div class="nav">
<nav id="navbar">
<header class="navhead">HTML Documentation</header>
<div class="nav-list-div">
<p class="nav-list"><a style="text-decoration: none" class="nav-link" href="#Introduction_to_HTML">Introduction</a></p>
<p class="nav-list"><a style="text-decoration: none" class="nav-link" href="#Metadata_in_HTML">Metadata in HTML</a></p>
</div>
</nav>
</div>
<section class="main-section" id="Introduction_to_HTML">
<header class="main-doc">Introduction to HTML</header>
<p class="intro-desc">HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.</p>
<p class="intro-desc">HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.</p>
<ul class="intro-list">
<header class="intro-list-header">A few examples of elements being used:
</header>
<li><h1>This is the syntax for a header.</h1></li>
<li><p>This is the syntax for a paragraph.</p></li>
</ul>
</section>
<section class="main-section" id="Metadata_in_HTML">
<header class="main-doc">Metadata in HTML</header>
</section>
</main>
</body>
</html>
/* file: styles.css */
.nav {
border-right: 4px solid lightgray;
overflow: hidden;
box-sizing: border-box;
width: 350;
height: 100%;
position: fixed;
left: 0;
}
.main-section {
position: relative;
box-sizing: border-box;
left: 375;
width: 60vw;
overflow: scroll;
margin-right: 100px;
}
header.main-doc {
font-size: 30px;
padding: 40px;
}
header.navhead {
font-size: 25;
text-align: left;
margin-top: 15px;
text-indent: 30px;
}
.nav-list {
font-size: 17px;
border-top: 1px solid black;
height: 3;
padding-top: 10px;
padding-bottom: 10px;
text-indent: 30px;
}
.nav-link {
color: inherit;
}
.intro-desc, .intro-list {
font-size: 17;
padding-left: 70;
padding-bottom: 20;
margin-top: 0;
}
.intro-list li {
margin-left: 50px;
padding-top: 20px
}
html {
font-family: sans-serif;
box-sizing: border-box;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page