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

HTML

Posted by jamesscottgtr
jamesscottgtr
1,813 Points

I don't know what I've done to change the width of the text input field...

I haven't a clue as to what I did to cause the <div> containing the submit button to jump below the <li> and also cause the text field width to change so drastically.

Anyone have any suggestions?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Practice CSS Selectors</title>
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Raleway" rel="stylesheet">
    <link href="http://treehouse-code-samples.s3.amazonaws.com/practice-css/styles-selectors.css" rel="stylesheet">
    <link href="selectors.css" rel="stylesheet">
  </head>
  <body>
    <div class="wrapper">   
      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        <img id="site-logo" src="logo.png" alt="Bookworm">
        <nav>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Get in Touch</a></li>  
          </ul>
        </nav>
      </header>

      <img class="main-img" src="main.jpg" alt="books">

      <!-- MAIN CONTENT -->
      <main>
        <h1>Latest Articles</h1>
        <article>
          <h3>Quisque Tortor Lacus</h3>
          <p>Morbi quis felis ex. Nulla lacus risus, laoreet tempus ipsum vitae, suscipit maximus est. Curabitur accumsan cursus ullamcorper. Proin tempus quam vel orci pulvinar, non finibus lectus rhoncus... <a href="#">read more &raquo;</a></p>
        </article>
        <article>
          <h3>Suspendisse et Eleifend Metus</h3>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tortor lacus, blandit vitae lacus ut dui rhoncus, laoreet diam vel, tincidunt... <a href="#">read more &raquo;</a></p>
        </article>       

       <div>
          <div>
            <h2>List of Important Stuff</h2>
            <ul>
              <li>Nulla lacus risus, laoreet tempus</li>
              <li>Praesent sit amet auctor sapien sit amet</li>
              <li>Aenean sit amet quam leo etiam</li>  
              <li>Duis eget nulla nec  lobortis habitant</li>          
            </ul>
          </div>
          <div>
            <h3>Stay updated on what I'm reading!</h3>
            <p>Vestibulum <a href="#">erat augue</a>, consequat non tellus ac, posuere scelerisque augue.</p>
            <input type='text' placeholder="Enter email...">
            <input type='submit' value="Signup">
          </div>
        </div>
      </main>

      <!-- FOOTER -->
      <footer>
        <span class="copyright">&copy;2017 Bookworm Blog</span>
      </footer>
    </div>
  </body>
</html>

/* ====================================================== 
   Practice CSS Selectors 
========================================================= */

/* Change the color of all list items inside an unordered list */

ul li {
  color: lightcoral;
}

/* Remove the text decoration from navigation links, and change their color when hovered */

nav a:link {
  text-decoration: none;
}

nav a:hover {
  color: skyblue;
}


/* Create visited and hover styles for all links inside 'main' */



main a:visited  {
  color:skyblue;
}

main a:hover {
  color: red;
  text-decoration:none;
}


/* 
 Change the background color of the submit button when active.
 Check teacher's notes for resources on this part of the challenge. */

input[type='submit']:active {
  background:firebrick;
}




/* Give the text field a blue border upon focus.
   Check teacher's notes for resources on this part of the challenge. */

input[type='text']:focus  {
  border: 1px solid steelblue;
}

/* Give the 'span' tag in the footer a meaningful class name and reduce its font size */

.copyright  {
  font-size: 12px;
}

/* Give the 'img' tag in the header an ID and set its width to 190px */

#site-logo  {
  width: 190px;
}

/* Target all heading tags on the page and set their font family to 'Bree Serif', serif */

h1, h2, h3  {
  font-family: 'Bree-Serif', serif;
}