Portfolio Project: Advice needed!

Hi everyone,

I have technically finished the portfolio project; all tests are passing. Here is the codepen. However, I want to continue improving it. There are a few problems I am having trouble solving. Namely, the page has a side scrolling thing going on that I suspect has to do with the background image, but I can’t seem to solve the problem. Also, I’m not sure how I feel about the design. I’ve been looking at it too long to tell whether it’s ok or not. If you have suggestions on either of these issues (or anything else), I would be happy for the advice. I am very much a beginner, and I have no idea what I’m doing. :sweat_smile:

Thanks In advance!

It’s about your h1 and h2 elements inside your first section. You should use margin-left instead of left.

h1 {
font-family: Megrim, sans-serif;
font-size: 45px;
position: relative;
top: 65px;
margin-left: 50px;
}

h2 {
font-family: Abel;
font-style: italic;
letter-spacing: 1.25px;
color: #bdbdbd;
position: relative;
top: 300px;
margin-left: 260px;
}

Thank you! I never would have figured that out haha. Does moving elements left instead of using margin-left add width to the page?

Normally, the effect of left depends on how the element is positioned. When position is set to absolute or fixed, the left property specifies the distance between the element’s left edge and the left edge of its containing block. So you pushed your element to right by using left.

But something that i don’t undestand is although your element was set to relative left property was still working . I don’t understand why that happened. I am confused. I hope someone can explain the reason.

I see, I might need to review different position settings. Thanks!