last-childがうまく動かない

以下のとおりdotinstall通り書いたのですが、CSSでlast-childが上手く反映されず、最後の行のborderが消えません。何が間違っているのか教えて下さい。（ググってもわかりませんでした。）

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf8"> <title>レイアウトの練習</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> <link rel="stylesheet" href="mycss2.css"> </head> <body> <div id="container"> <div id="header"> <h1> <img src="dummy.png" height="100" width="600"> </h1> </div> <div id="menu"> <ul> <li><a href="">ホーム</a></li> <li><a href="">製品情報</a></li> <li><a href="">企業上場</a></li> </ul> </div> <div id="main">

  <div id="contents">
    <h2>見出し</h2>
      <p>こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。</p>
      <p>こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。</p>
      <ul class="products">
        <li>
          <img src="dummy.png" width="60" height="60">
          <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
        </li>
        <li>
          <img src="dummy.png" width="60" height="60">
          <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
        </li>
        <li>
          <img src="dummy.png" width="60" height="60">
          <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p>
        </li>
    <h2>見出し</h2>
      <p>こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。</p>
      <p>こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。</p>
  </div><!-- contents -->

  <div id="sidebar">
    <h3>見出し</h3>
      <p>こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。</p>
    <h3>見出し</h3>
      <p>こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。こんにちわ。</p>
  </div><!-- #sidebar -->

ーーーここからCSS3
/* myycss2.css */

html {
background-image: url("gray.png");
height: 100%;
}

body {
height: 100%;
font-family: Verdana, Arial;
}

body > #container {
height: auto;
}
#container {
min-height: 100%;
height: 100%;
width: 600px;
/* width: 70%; */
margin: 0 auto;
padding: 0 10px;
background-color: white;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

#header {
margin-bottom: 15px;
}

#menu {
margin-bottom: 15px;
overflow: hidden;
}

#menu ul > li {
float: left;
width: 100px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ccc;
margin-right: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}

#menu ul > li:hover {
background: #ddd;
}

#menu ul > li > a {
text-decoration: none;
display: block;
}

#main {
overflow: hidden;
margin-bottom: 15px;
}

#contents {
float: left;
width: 400px;
}

#sidebar {
float: right;
width: 180px;
}

#footer {
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}

h2, h3 {
font-weight: bold;
}

h2 {
font-size: 16px;
border-left: 5px solid #ccc;
padding: 3px 0 3px 10px;
margin-bottom: 10px;
}

h3 {
border-bottom: 1px solid #ccc;
padding: 3px 0;
margin-bottom: 10px;
}

p {
margin-bottom: 14px;
}

ul.products {
margin-bottom: 15px;
}

ul.products > li {
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
}

ul.products>li:last-child {
border: none;
}

ul.products > li > img {
float: left;
width: 60px;
}

ul.products > li > p {
margin-left: 70px;
font-size: 13px;
}

行動規範の内容に同意します

回答1件

ベストアンサー

<ul class="products"> が閉じられていません。以下の通り修正したら、ボーダーが消えました。

lang
1  <ul class="products"> 
2    <li> 
3      <img src="dummy.png" width="60" height="60"> 
4      <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p> 
5    </li> 
6    <li> 
7      <img src="dummy.png" width="60" height="60"> 
8      <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p> 
9    </li> 
10    <li> 
11      <img src="dummy.png" width="60" height="60"> 
12      <p>説明です。説明です。説明です。説明です。説明です。説明です。説明です。説明です。</p> 
13    </li> 
14  </ul> <!-- ← ここです -->
15<h2>見出し</h2>