CSS Assistance - Technical Document

HTML-CSS
1

Tell us what’s happening:
Good morning everyone,
I have css question. On my technical Documentation page, I am trying to bring my main text higher up on the page. Any help would be appreciated.

Your code so far
https://codepen.io/AJS17/full/jRxYxr

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page

2

Try reducing the body's top margin and padding.

1 Like
3

Good evening, When I reduce the aforementioned the page moves but it gets lost behind my nav bar… am not sure how to solve this still. I was thinking that maybe I need to give it a new layer by setting the position differently…?

4

As I saw your code: the reason is your margin:
Try: body, html { margin: 0 100px; }
don’t use: margin: 0;

31%20AM
31%20AM1356×780 76.1 KB
34%20AM
34%20AM1566×802 74.1 KB

5
  1. I would get rid of the grouped selector targeting both the html and body and just use the body selector.
body {
  /* remember to use a fall-back font */
  font-family: lato, sans-serif;
  /* Setting a font-size on the body is a good idea */
  font-size: 18px;
  margin: 0;
  /* padding on the top/bottom, let the margin on the main element handle the horizontal spacing */
  padding: 20px 0;
}
  1. Then move the margin to the main element.
#main-doc {
  margin-left: 240px;
}

It is often better to think of margin as from the element out, and not from its parent container in. That is, move the element by pushing on its outer container (or pulling with negative margin).

  1. The nav element doesn’t belong inside the main element and should come before it in the source order. Move the nav out of the main element and put it before it.

  2. I would prefer if your <header> elements contained heading elements (h1-h6). The header element does not substitute headings and as such you have no headings on the page. Which isn’t a good semantic document structure.

You have:

<header id="big">INTRODUCTION</header>
<header class="par">Java Script</header>

What I’m suggesting:

<header id="big">
  <h1>INTRODUCTION</h1>
</header>

<header class="par">
  <h3>Java Script</h3>
</header>
  1. I would overflow-y: auto; on the #navbar so you only get a scrollbar when needed.
6

Thank you very much for your help! I completely understand what your saying in regard to semantic structure. I am still a little confused on css. Thank again.