title: can't get my image to resize in CSS
body: <p>This is my current code and the problem now is that image3, which is the 2nd box is not showing the correct height... The following is the updated code for my style.css:</p>
  
  <pre><code>body {
      margin: 0;
      padding: 0;
      font-family: 'Arial', 'serif';
  }
  
  .nav {
     background-color: #ffffff;
     color: #000000;
     list-style: none;
     text-align: right;
     padding: 20px 0 0 0;
  }
  
  .nav &gt; li {
      display: inline-block;
      padding-right: 50px;
      font-size: 12px;
  }
  
  .nav &gt; li &gt; a {
      text-decoration: none;
      color: #000000;
  }
  
  .nav &gt; li &gt; a:hover {
      color: #c1c1c1;
  }
  
  .logo {
      color: black;
      float: left;
      padding-left: 25px;
      font-size: 12px;
      font-weight: bold;
  }
  
  .logo &gt; a {
     text-decoration: none;
     color:black;
  }
  
  .banner {
      width: 100%;
      display:block;
  }
  
  .banner &gt; .banner-image {
      width: 100%;
      display: block;
      height: 700;
  }
  
  .service1 {
      width: 298px;
      border: 1px solid #c1c1c1;
      margin: 20px 10px;
      padding: 0 5px;
      float: left;
  }
  
  .service1 &gt; p {
      font-size: 14px;
      color: #636363;
      max-width: 200px;
      text-align: justify;
  
  }
  
  .services {
      width: 1500px;
      margin:0 auto;
  }
  
  h1 {
      font-size: 16px;
      font-weight: bold;
      background-color: #c1c1c1;
      color: #ffffff;
      padding: 10px 0;
      margin: 0 -6px;
  }
  
  .image {
      max-width: 135px;
      margin: 15px 0 0 0;
  }
  
  .heading {
      text-align:center;
      font-size: 25px;
      color: #000000;
      margin:100px 0 50px 0;
      font-weight: bold;
  }
  
  .service1 &gt; image1 {
      max-width: 120;
      margin: 15px 0 0 0;
  }
  
  .service1 &gt; image3 {
      max-width: 120;
      margin: 15px 0 15px 0;
  }
  
  
  .image:hover {
      opacity: 0.2;
      max-width: 200px;
       margin-top:15px;
  }
  
  .image1:hover {
      opacity: 0.2;
      max-width: 200px;
      margin-top:15px;
   }
  
  .message {
      text-align: center;
      font-size: 30px;
      font-weight: bold;
  }
  
  
  .message ul {
      text-align: center;
      list-style-position: inside;
  }
  </code></pre>
  
  <p>This is my index.html code:</p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;link rel="stylesheet" type ="text/css" href="style.css"&gt;
  &lt;title&gt;Pianocourse101&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
     &lt;ul class="nav"&gt;
  
        &lt;div class="logo"&gt;
           &lt;a href="index.html"&gt;Pianocourse101&lt;/a&gt;
        &lt;/div&gt;
  
  
  
    &lt;li&gt;&lt;a href="http://localhost/pianocourse101/register.php"&gt;Register&lt;/li&gt; 
        &lt;/a&gt;
    &lt;li&gt;&lt;a href="http://localhost/pianocourse101/login.php"&gt;Login&lt;/li&gt;&lt;/a&gt;
  
    &lt;li&gt;&lt;a href=""&gt;About Me&lt;/li&gt;&lt;/a&gt; 
    &lt;li&gt;&lt;a href=""&gt;Contact Us&lt;/li&gt;&lt;/a&gt; 
  </code></pre>
  
  <p></p>
  
  <pre><code>   &lt;div class="banner"&gt;
        &lt;img class="banner-image" src="images/mervin.gif"&gt;
     &lt;/div&gt;
  
     &lt;br&gt;&lt;/br&gt;
     &lt;br&gt;&lt;/br&gt;
     &lt;div class="message"&gt;
        &lt;p&gt; At Pianocourse101, you will learn the following&lt;/p&gt;
           &lt;ul&gt;
              &lt;li&gt;Basic hand positions&lt;/li&gt;
              &lt;li&gt;Posture&lt;/li&gt;
              &lt;li&gt;Rhythm&lt;/li&gt;
              &lt;li&gt;Finger numbers&lt;/li&gt;
              &lt;li&gt;Letter names&lt;/li&gt;
           &lt;/ul&gt;
     &lt;/div&gt;
  
  
     &lt;div class="heading"&gt;Services&lt;/div&gt;
        &lt;div align="center" class="services"&gt;
           &lt;div class="service1"&gt;  
              &lt;h1&gt;Download Section: Primer Level&lt;/h1&gt;
              &lt;a href=""&gt;&lt;img class="image1" src="images/treble.png"&gt;&lt;/a&gt;
              &lt;p&gt;Access full contents for just &lt;strong&gt;$50!&lt;/strong&gt; Learn the 
   basic hand positions, finger numbers and letter names!&lt;/p&gt;
           &lt;/div&gt;
  
  
      &lt;div class="service1"&gt;  
          &lt;h1&gt;Download Section: Level 1&lt;/h1&gt;
          &lt;a href=""&gt;&lt;img class="image3" src="images/bass.jpg"&gt;&lt;/a&gt;
          &lt;p&gt;Access full contents for just &lt;strong&gt;$100!&lt;/strong&gt; Learn some 
      advanced pieces, slurs and staccatos!&lt;/p&gt;
  
        &lt;/div&gt;
  
  
       &lt;div class="service1"&gt;  
          &lt;h1&gt;Download Section: Level 2&lt;/h1&gt;
          &lt;a href=""&gt;&lt;img class="image" src="images/crotchet.png"&gt;&lt;/a&gt;
          &lt;p&gt;Access full contents for just &lt;strong&gt;$150!&lt;/strong&gt; Progress and 
      play some more advanced pieces hands together!&lt;/p&gt;
       &lt;/div&gt;
  
        &lt;div class="service1"&gt;  
          &lt;h1&gt;Download Section: Level 3&lt;/h1&gt;
          &lt;a href=""&gt;&lt;img class="image2" src="images/bass.jpg"&gt;&lt;/a&gt;
          &lt;p&gt;Access full contents for just &lt;strong&gt;200!&lt;/strong&gt; Feeling more 
       confident and need a challenge? Level 3 will provide you with more 
          challenging pieces!&lt;/p&gt;
           &lt;/div&gt;
         &lt;/div&gt;
  
     &lt;section&gt;
  
     &lt;/section&gt;
     &lt;footer&gt;
  
     &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am not sure why I have to add more comments but I can't figure out why my second box is not lining up correctly...</p>
  
  <p>/* CSS alignment is read as top, left, bottom, right*/</p>