Personal Portfolio Webpage - Build a Personal Portfolio Webpage

[k-v-g]

Hello everyone, I am stuck on some things for my portfolio page.

1. If you scroll right for some reason the screen extends to bigger than viewport width, i cannot figure out how to fix this!
2. My social links at the bottom, I cannot seem to lessen the gap between each item

I would really appreciate some help with these problems

Your code so far
my codepen link:

profile page challenge

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

freeCodeCamp.org

[Guided]

A few things you may find helpful to debug:

• commenting out code.

  • try commenting out ALL of your width: 100% in your css. This will help you see what is causing the viewport to overflow
    (you can always uncomment the ones you need once you find the problem)

• adding borders to your HTML.

  • I like to use `* { border: 1px solid green };
    (this can help you see where one element ends and another begins.)

• ‘Inspector’ tools.

  • if you right click an element on your page, it will bring up a menu, click ‘inspect’ to bring up tools.
    (your browser tools may look slightly different to mine, I’m using Microsoft Edge)

In my browser tools you can hover over an elements code to see its padding, margin and size.

I’m not sure if this is the element you were having trouble with
looking at the box model on the bottom right, you can see a top padding of 100, and bottom padding of 150

[k-v-g]

Thank you for the tip, adding the border to html really helped, ill use that from now on for all my projects
Turns out i needed to add the :before:after box-sizing inherit rule and it fixed it x