In need of some help please! - Building a technical document

Hi there, I’m trying to build a technical document as part of the responsive web design curriculum. I’ve passed all the tests but I’m having trouble making the body element align in the center. Any help would be appreciated. Here is my codepen: https://codepen.io/rory-knox/pen/OJXYLYx
I’m not sure what I’m doing wrong and managed to pass user story 14 by accident after adding adding an element in the CSS above the id “navbar”. Any ideas why? Thanks for the help.

1 Like

Hi @roryknox_2

I looked at your code. Couple of things to look at:

  1. You don’t have to include the ‘body’ element in your HTML section in codepen because all that you write in the HTML section is written in the ‘body’ element.
  2. You will have to give ‘margin-left’ property to your (#main-doc) that is ‘main’ element to move it from left and don’t forget to make ‘position: absolute;’

look at my technical documentation page: https://codepen.io/junaidshaikh_js/pen/GRqazej

I hope this will help.
Thanks

1 Like

Hi @junaidshaikh_js, thankyou so much for taking the time out to answer my question. I have made the amendment to my code as suggested but it’s not made a difference to what appears in my browser. Am I doing something wrong?
Here’s my code pen: https://codepen.io/rory-knox/pen/OJXYLYx

1 Like

Hi @roryknox_2, welcome to the FCC Forum.
I’m thinking about how to fix your code, but I think it will be better to give you some resources to fix it by yourself.
You haven’t a layout for your code, usually is better to have the elements within a flex or grid layout. This grants you the possibility to order your items in many different ways.

I recommend you to take a look at flexbox:

And read about the holy grail of CSS:

If you prefer, you also can try using grids:

This pen contains a very readable way of implementing grids:
https://codepen.io/vmasto_1470672674/pen/YEVPdm

Of course, you can simply order your items, but I think this is not enough to catch the idea of the project.

Just to share with you, here is my own tech-doc, if you take a look at my other pens, you will realize that I already reuse a lot of that code, and that’s the point about using layouts.

https://codepen.io/Jeremas/full/oNXJVgg

Keep on this track, good luck!

2 Likes

Hi @roryknox_2

In the CSS section whatever code you write is written in the ‘style’ element. There is no need to include ‘style’ element there.

Remove that style element from your code and it will work. I just checked it.

1 Like