Debugging a Scrollbar code that's not working properly on Blogger - html

Question

I've been trying to get this scrollbar code to work on Blogger, but haven't been able to figure out how to. Can someone see if they are able to figure out what the issue is, and how to resolve it.
Same Code, Both look and act different,
Jsfiddle:
https://jsfiddle.net/xuc92tt3/
Screenshot
vs.
Blogger:
https://debugscroll.blogspot.com/
Screenshot
Also, there shouldn't be a horizontal line below the div blocks either.
<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>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
</ul>

Answer 1

Looks like in the blogspot example your <li> elements are inheriting a 15px padding from a global style declared in the page head section.
Try overriding that with the following css:
.test li {
padding-bottom: 20px;
padding-left: 0;
padding-right: 0;
}

Answer 2

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