Bulleted text misaligned in second line

HTML & CSS
1

When the li option 2 continues to appear in the next line, it doesnt start exactly in the spot where it has to. Rather it starts beneath the bullet. It has to start below the text of first line above it. plz let me know the solution.


<div class="inner_banner_bullets">
<ul>
<li>• Option 1</li>
<li>• Option with the line that continues to appear in the second line  </li>
<li>• Option 3</li>
</ul>
</div>



.inner_banner_bullets{
  padding:20px 10px 10px 10px;
  background: #353C2C;
  margin:10px 0 0 0;
  color:#7c7c58;
  text-align:left;
  font:13px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
  border: 1px solid #2b2e1f;
  line-height:22px;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
 -webkit-column-gap: 20px;
  column-count: 2;
 column-gap: 20px;
 height:auto;  
	}
2

Hi, if you remove the hard coding of hte bullet (in the HTML) and let hte <ul> just naturally give hte bullet, the text won’t slide under the bullet :slight_smile: