(heading 1) "Home" moves all the way to the right after adding jQuery. Track: jQuery Basics: Perform Part 1

Question

Hello there,
I tried modifying CSS for H1 by adding 5px to the top (45px, 0, 10px) as suggested in a different post for the same problem and also tried to add padding of 10px but no change. Still displays H1 "Home" on the right and not at the center.

// Create a select and append to #menu 
var $select = $("<select></select>");
$("#menu").append($select);

// Cycle over menu links
$("#menu a").each(function(){

  var $anchor = $(this);
  // Create an option 
  var $option = $("<option></option>");

  // option's value is the href
  $option.val($anchor.attr("href"));

  // option's text is text of link 
  $option.text($anchor.text());

  // Append option to select 
  $select.append($option); 
});  


h1 {
    margin: 40px 0 10px;
    text-align: center;
    color: #384047;
}


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li class="selected"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
  </div>

    <h1>Home</h1>
    <p>This is the home page.</p>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Thank you in advance.

Answer 1 · 2015-06-09T04:15:23Z

June 9, 2015 4:15am

Hi.

I added

clear: both

to the css for the h1 element and it returned to the center.

Hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

a k

a k

(heading 1) "Home" moves all the way to the right after adding jQuery. Track: jQuery Basics: Perform Part 1

1 Answer

Michael Armstrong

Michael Armstrong

marvelousperson206

marvelousperson206