Text and image in unordered list are overlapping - css

Question

I want to move the text in this unordered list further to the right of my graphic, so they don't overlap. How do I do this?
Here's my code:
.page p { line-height: 1.2em; }
.page a { color: #1badd2; text-decoration: none; }
.widget li {
margin: 0;
padding: 2px 0px 8px 35px;
display: block; position: relative;
border-bottom: none;
}
.widget li:before {
content: '';
display: block;
background: url(http://bryancollins.eu/wp/wp-content/uploads/2014/04/arrow.png) no-repeat 0 0;
height: 12px; width: 30px;
position: absolute; top: 6px; left: 0px;
}
You can see it in action here: bryan.collins.eu/wp

Answer 1

You need to make room at the left by adding padding to the li element. The absolute positioning declared on the li:before selector causes it to be stacked above the li element.
Add this rule to this selector:
.featured-box ul li {
padding: 0 0 0 40px;
}
To vertically center the arrow a little more: Change the top value to 10px.
.widget li:before {
top: 10px;
}
Note: You could easily have added this as a background image on the li without using the :before selector.
.featured-box .widget li {
list-style: none;
background: url("http://bryancollins.eu/wp/wp-content/uploads/2014/04/arrow.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
display: block;
margin: 0 0 0 30px;
padding: 0 0 0 40px;
}