Custom checklist column width is not working - css

Question

I can't seem to change the width of my checklist. I'm trying to reduce the width and have some margin around the checklist item but it doesn't work. Here's what I have so far: https://jsfiddle.net/h64f1otw/1/
Snippet of my checklist:
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
columns: 2 4em;
}
.checkList li{
color: #fff;
}
I'm trying to achieve something like below:

Answer 1

what i did is adding display:flex for ul element and applying margin on li element with width:50% for each
to center your div you need to add margin:0 auto on heroInner class and remove padding on content class
.hero {
position: relative;
height: 44vh;
max-height: 64rem;
min-height: 28rem;
}
.background {
background-image: url('https://images.unsplash.com/photo-1531845116688-48819b3b68d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2851&q=80');
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
}
.overlay {
background: linear-gradient(to right, #1d1d1d, rgba(0, 0, 0, 0));
position: absolute;
top: 0;
left: 0;
display: table;
height: 100%;
width: 100%;
}
.inner {
display: table-cell;
width: 100%;
padding-top: 6rem;
padding-bottom: 6rem;
vertical-align: middle;
text-align: center;
}
.content {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media (min-width: 62.25rem)
{
.content {
padding-left: 3rem;
padding-right: 3rem;
}
}
.heroInner {
text-align: left;
max-width: 31rem;
margin:0 auto;
}
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.checkList li{
color: #fff;
margin-top: 30px;
}
.checkList li:nth-child(odd){
width:30%;
}
.checkList li:nth-child(even){
width:60%;
}
<div class="hero">
<div class="background"></div>
<div class="overlay">
<div class="inner">
<div class="content">
<div class="heroInner">
<div class="checkListContainer">
<ul class="checkList">
<li>Long term leases</li>
<li>Bespoke solutions</li>
<li>Multi city campaigns</li>
<li>Measuring success with data</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>