Technical Documentation Page - Build a Technical Documentation Page

[iamthedump69]

hi,

I’m struggling to the the .nav to be on the right hand side like the demo doc. it either looks like the image posted or it sits on top of the main-section

Link to the challenge:

freeCodeCamp.org

{
font-size:2.0rem;
background-color:white;
}

CSS:
* {
  font-family: Arial, sans-serif;
  font-size: 18px;
}

header {
  border-bottom: 1px solid white;
  margin-top: -10px;
  text-align: center;
}

nav {
  background-color:pink;
  color: white;
  width: 200px;
  position:left;
  top: 0;
  left: 0;
  height: 100%;
  overflow-y: auto;
  padding-top: 20px;
  display:flex;
}

.nav-link {
  display: block;
  text-decoration: none;
  letter-spacing: 0.1rem;
  color: white;
  border-bottom: 1px solid white;
  transition: background-color 0.3s;
  padding: 10px 20px;
  text-align:left;
  display:flex;
}

.nav-link:hover {
  background-color: rgb(232, 199, 200);
  color: #173837;
}

.main-section {
  padding: 20px;
  margin-left: 220px;
  font-size:1.1rem;
  display:;
}

header {
  font-size: 1.1em;
  margin-top: 0;
}

@media (max-width: 768px) {
  nav {
    width: 100%;
    height: auto;
    position: relative;
  }
  .main-section {
    margin-left: 0;
text-align:left;
  }
.code{
background-color:pink;
}

[pkdvalis]

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

[pkdvalis]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').