White space to the left of my Codepen pens

HTML-CSS
1

Hello

I am currently working on the responsive web design projects using Codepen. On all of my projects, I seem to have about 5px whitespace to the left of my page. I’m not sure if this a codepen issue or my code, but it seems to be happening on all of my pens, and I noticed it does not do this with the example projects set out by Freecodecamp.

Below is an example. My personal portfolio (unfinished I might add).
[https://codepen.io/jade-marie-jamana/pen/oNzzZww]

Any ideas?

2

It’s extra margin/padding added by the browser.
To remove in your page, at top you can include

body{
    margin: 0;
    padding: 0;
}

Personally, I include below snippet in my css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

As, I’m already removing the default margin and padding, It allows me to style the content on all browsers without caring about default spacing in different browsers.
Hope this helps!!

1 Like