Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 2

Kevin Alvarez
Kevin Alvarez
4,851 Points
Posted by Kevin Alvarez
Kevin Alvarez
4,851 Points

After placing select box <h1> becomes uncentered

When i insert the select box into the page the "Home" text right under it becomes un centered by moving to the left a little. I have no clue whats causing this. I tried removing the top margin of the h1 tag to see if it was collapsing but it didnt help either.

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

You need to post your code to allow someone to look into this.

Even better, make a snapshot of your workspace and provide the link to it.

Sean Warrener
Sean Warrener
4,398 Points
Sean Warrener
Sean Warrener
4,398 Points

I can vouch for this, here's a snapshot of my workspace: https://w.trhou.se/q5swigykda

and the URL to the page: http://port-80-3khrp07u7o.treehouse-app.com/index.html

3 Answers

Cezary Burzykowski
Cezary Burzykowski
18,291 Points
Cezary Burzykowski
Cezary Burzykowski
18,291 Points

Hey there,

I had the same problem. As you will refresh the page you will see that <h1> is centered till the very moment that jQuery is loaded, then it is pushed to side by the element generated in jQuery. There is an easy fix for this, just head to your CSS file and give your h1 { clear: both; }

Tawanda Musabaika
Tawanda Musabaika
10,522 Points

Thanx for that, your fix worked for me!.

Timothy Morrison
Timothy Morrison
7,720 Points
Timothy Morrison
Timothy Morrison
7,720 Points

This worked for me.

In our style.css file we have this rule:

select {
    width: 84%;
    margin: 11px  0 11px 2%;
    float: left;
}

If we remove the float declaration (or maybe just comment it out as a temporary fix) the h1 will center.

select {
    width: 84%;
    margin: 11px  0 11px 2%;
    /***float: left;***/
}

Save and refresh.

I hope this helps. I don't have an explanation as to why the same problem doesn't happen in the video. Good luck!

Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points
Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points

Thanks! I actually ran into the same problem. Has anyone come up with a explanation on why this happened?