Bloggerで正しく動作しないスクロールバーコードのデバッグ

Question

私はこのスクロールバーコードをBlogger上で動作させようとしてきましたが、方法を理解できませんでした。問題が何であるか、そして解決する方法を見つけられるかどうか誰かが見ることができます。

同じコード、両方が見えると異なる行動、

Jsfiddle：

https://jsfiddle.net/xuc92tt3/

Screenshot

対

ブロガー：

https://debugscroll.blogspot.com/

Screenshot

また、いずれかのdivブロック下に横線があってはなりません。

<style> 
 
     .test { 
 
     width: 266px; 
 
     height: 175px; 
 
     padding: 0; 
 
     margin: 0; 
 
     overflow: auto; 
 
     background: #000; 
 
     list-style: none; 
 
     text-align: left; 
 
     } 
 
     
 
     .test li { 
 
     padding-bottom: 20px; 
 
     } 
 
     
 
     .test li:last-of-type { 
 
     padding: 0; 
 
     } 
 
     
 
     h2 { 
 
     margin: 0; 
 
     line-height: 1; 
 
     font-size: 25px; 
 
     color: #00f; 
 
     } 
 
     
 
     .test a:link { 
 
     width: 243px; 
 
     height: 20px; 
 
     display: block; 
 
     background: green; 
 
     } 
 
     
 
     .test a:visited { 
 
     background: #f00; 
 
     color: #000000; 
 
     } 
 
     
 
     .test a:hover { 
 
     color: #000; 
 
     } 
 
    
 
    </style> 
 
    
 
    
 
    <ul class="test "> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
     <li> 
 
     <h2>Text</h2> 
 
     <a href="#" target="blank"></a> 
 
     </li> 
 
    </ul>

Answer 1

Blogspotの例では、あなたの<li>要素はページのheadセクションで宣言されたグローバルスタイルから15ピクセルのパディングを継承しているように見えます。

.test li { 
    padding-bottom: 20px; 
    padding-left: 0; 
    padding-right: 0; 
} 

Answer 2

動作しませんでした。このCSSコード

.main-inner .widget ul li { 
    padding: 0; 
    border-top: 0; 
    border-bottom: 0; 
    margin-bottom: 20px; 
} 
.main-inner .widget h2 { 
    margin: 0; 
    padding: 0; 
}