Project Assistance

Code Feedback
1

Hello (freecodecamp) World,

I’m a beginner and am currently trying to sharpen my HTML and CSS skills by building a small mock-up of the GOOGLE home page. I’m having a bit of trouble making the header stay on top and not interact with my main tag. It took me a while to align the stuff on the navbar to the left and right side. But now that I’m trying to center my main tag, it automatically brings my header tag with it. Any advice? https://codepen.io/chrismorales/pen/YzzWgJJ

2

I don’t think I understand your issue. Your header appears to be on the top. How is it interacting with your main tag? Have you already resolved this?

3

In the CSS did you try to give it an position of absolute/sticky?

4

I want the <header> to stay on top while having my <main> be in the center of the page. Whenever I bring the <main> down to the center of the page, it brings the <header> along with it.

5

It looks like moving the <main> down with margin will carry the <header> down too. But padding will move <main> separately. I’m trying to understand why myself…

6

.container {
display: block;
position: absolute;
text-align: center;
width: 400px;
margin: 80px 300px;
}

footer {
position: absolute;
margin: 300px 45px;
}

That will do because of float properties and document normal flow. you need to move your main and footer with position absolute.