Help me with CSS

HTML-CSS
1

Hi, I was practicing CSS. Please check here: https://codepen.io/sheikh4awais/full/OJLXBep

The problem I am facing is that when I give a Background color, it moved the other content below. Please go to the link to check what I am talking about. Can anyone give me a solution? I am newbie to this.

Thanks with regards.

2

Hi, correct me if I’m wrong.
What you want to do is having a big yellow section that contains the navbar, right?

If that is the case, the problem is that the navbar is outside the header section (or the div in which you applied the css class).

<header>
        <img id="main-logo" src="https://survicate.com/wp-content/uploads/2019/01/Mailchimp_Logo-Horizontal_Black.png" alt="Mailchimp logo">
        <div class="yellow-bg"></div>
    </header>

    

    <nav>
        <ul class="main-right">
            <li>Why Mailchimp?</li>
            <li>Marketing Platform</li>
            <li>Pricing</li>
            <li>Resources</li>
        </ul>
        <div class="hero-nav-btn">
        <button class="hero-nav-btn1">Login</button>
        <button class="hero-nav-btn2">Sign up</button>
        </div>
    </nav>
3

I was trying to clone https://mailchimp.com/
I want to use the background color for every hero conten likeon the mailchipm.

4

I was trying to clone https://mailchimp.com/
I want to use the background color for every hero conten likeon the mailchipm.

5

Ok, than all the content that has to be in the yellow box needs to be put inside the div (or any other element - header would work as well) that has the yellow-bg class.
But be aware that if the height of the content exceeds that of the container it will overflow (so part of it will be on a white background).

1 Like
6

Ohh, thank you. It worked…

7

You’re welcome. Good luck with the rest of the design :smile:

1 Like