Unordered List Help! Need a solution to this - html

Question

How can I remove the bullet and extra space before li.
I have tried list-style: none, but this just removed the bullet and the extra space still remains. Here is the jsFiddle.
I would like something like this.
.

Answer 1

The ul tag takes default padding which given by the browser so you have to remove it. By adding padding:0px.
/* --------------------------------------
Pricing & Plans
-------------------------------------- */
.pricing-title {
color: #272727;
text-align: center;
padding: 15px;
font-family: 'myriadbold';
border-bottom: 2px solid #ededed;
}
.pricing-price {
color: #4f4f4f;
text-align: center;
font-size: 80px;
margin-bottom: 20px;
}
.pricing-yr {
font-size: 20px;
font-family: 'myriadsemibold';
}
.price-bg ul {
list-style-type: none;
position: relative;
left: 0px;
border-top: 1px solid #eaeaea;
padding:0px;
}
.price-bg ul li {
position: relative;
padding: 16px 5px 16px 70px;
border-bottom: 1px solid #eaeaea;
}
.price-bg ul li:before {
font-family: "fontawesome";
content: "\f00d";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
position: absolute;
top: 50%;
left: 0;
width: 52px;
font-size: 12px;
color: #ef662f;
text-align: center;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.price-bg ul li.tick:before {
font-family: "fontawesome";
content: '\f00c';
color: #7ab55c;
}
.price-bg ul li:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 52px;
bottom: 0;
width: 1px;
background: #eaeaea;
}
.price-bg {
background-color: white;
border-radius: 7px;
width: 100%;
border: 1px solid #eaeaea;
-webkit-box-shadow: 0px 2px 4px 0px rgba(148,148,148,0.4);
-moz-box-shadow: 0px 2px 4px 0px rgba(148,148,148,0.4);
box-shadow: 0px 2px 4px 0px rgba(148,148,148,0.4);
}
<section class="container">
<h3>SUBHEADING</h3>
<h1>Simple Pricing for All</h1>
<div class="row">
<div class="col-sm-4">
<div class="price-bg">
<h3 class="pricing-title">BASIC PACKAGE</h3>
<h1 class="pricing-price">£150<span class="pricing-yr">yr</span></h1>
<ul>
<li class="tick">3x iBeacons<span>+ £30 for additional iBeacon</span></li>
</ul>
<p>APP FEATURES</p>
<ul>
<li class="tick">Smart Quiz</li>
<li>Educational Tasks</li>
<li>Interactive Gallery Game</li>
<li>Brand Customisation</li>
<li>Removed Watermark</li>
</ul>
<p>PACKAGE SUPPORT</p>
<ul>
<li>All Future Features/Content<span>+ exclusive content</span</li>
<li class="tick">Unlimited, free 24 hour support</li>
<li class="tick">Unlimited Users</li>
<li class="tick">Free Maintenance</li>
<li class="tick">No setup fees</li>
</ul>
<p>EXTRA ADD-ONS (OPTIONAL)</p>
<ul>
<li>Step by Step Videos</li>
<li>Content Request<span>(Our team will update the apps
content for you)</span></li>
<li>Workshop<span>+ step by step videos</span></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="price-bg">
</div>
</div>
<div class="col-sm-4">
<div class="price-bg">
</div>
</div>
</div>
</section>

Answer 2

just add padding-left 0
for (.price-bg ul)

Answer 3

add padding-left: 0px; to the .price-bg ul

Answer 4

It's because of the default margin and padding on list items.
Reset the margin and padding to 0 on .price-bg ul. Here is an updated fiddle
.price-bg ul {
list-style: none;
position: relative;
left: 0px;
margin: 0;
padding: 0;
border-top: 1px solid #eaeaea;
}

Answer 5

Adding to the other answers, if you are using bootstrap, you can add class:
class="list-unstyled"
To your UL.