SOLVED - Some alignment problems with Google Homepage Project



I think I’m about 75% finished my Google homepage project and I’ve gotten stuck. I haven’t been able to get the text at the bottom left of the screen to align with the text at the top left without creating other problems.

Putting a clearfix div around everything at the top of the screen fixed the alignment problem, but it also introduced new problems. It pushed the bottom right text past the right edge of the screen, put a scrollbar at the bottom of the screen, and removed the inline formatting for the list at the bottom right.

Here’s a link to my Google homepage project on GitHub:

How can I get the top left and bottom left text to align without messing up the formatting of the text at the bottom right?

On a final note, this is my first website project with CSS. Are the issues I’m having related to more advanced topics that will be addressed in later parts of The Odin Project curriculum?

Many thanks!


Removing float: left from the left footer menu fixed my alignment problem. Solving this was simple, but not easy for me :slight_smile: Hopefully, as I gain more experience, I’ll develop a better feel for when researching an issue helps find a solution and when stepping away from the problem to gain a different perspective leads to a solution. For this problem, the latter is what helped me, plus a lot of tinkering.

I’d still really appreciate it if anyone could tell me why floating the left footer menu caused my alignment problem, but floating the top left menu did not cause any issues.