Help- element falls outside of viewport

#1

Hi! I am new to CSS and I try to recreate a website. Here is the code: https://codepen.io/danamaria5/pen/mdVzRmm . I have a few problems until now:

  1. https://imgur.com/a/STC5bzp
    . The “Who we are” section is falling outside of viewport creating unwanted whitespace. What I find strange is that this happens only in the browser. When I inspect the element in the responsive setting, both sections are a bit bigger than the viewport but there is no whitespace.

The header is overlapping the body text starting with 960px.

Thank you

#2

Hi,

This is hard to examine. Could you copy the code into a codepen and send the link? Then I can look at it and see if I can figure this out.

Greets,
Karin

1 Like
#5

Here it is: https://codepen.io/danamaria5/pen/mdVzRmm .

#6

I’m quite busy right now but I’ll get back to you today.
Greets,
Karin

1 Like
#7

Hi,

You’ve done this very nicely. I cannot see much of a problem inside the codepen except for two things that I’ve noticed:

  1. In the section ‘home-hero’, there’s a div with a contaier class instead of container.
  2. The home-about section does not stretch accross the entire width of the screen. To the left there’s this tiny bit of white. This is resolved when the home-about-textbox margin-left is decreased to -2.58 instead of -2.5.

I hope that the webpage does not render differently outside of codepen.
Would you like a review of the rest of the page or are you still working on it?

Greets,
Karin

#9

The typo was a big part of the problem , thank you. But now I got into the situation where the container applies the colors just to the home-hero and the font-weight just to the home-about .

Please, have a look here, where I also added a code snippet : Container applies properties preferentially to sections