How to fit box-shadow element

Question

I had li element that I make into two column, I want to add box-shadow on two column, but box-shadow do not fit the two-column I make, here is what I tried:

.ul1 {
  column-count: 2;
  column-gap: 0px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.li1 {
  border: 1px solid blue;
  border-bottom: 0px;
  list-style: none;
}

.li1:nth-child(-n+5) {
  border-right: 0px;
}

.ul1 li:last-child,
.ul1 li:nth-child(5) {
  border-bottom: 1px solid blue;
}

<ul class="ul1">
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
  <li class="li1">Test</li>
</ul>

I do not why this happen, I had try to set fix-height, but it doesnt work, I could use some guidance and suggestion to solve this

Answer 1

Add this CSS:

.ul1 {
  padding: 0;
}

Answer 2

try to

    ul {
    padding-left: 0px;
}

and you don't need this class name like this , you can get style by tag name or some like this .

thanks