How to get rid of the dots on the side of list items?

Question

I have this problem where in the index page to show all my articles I get a dot on the very left side:

If anyone knows how to get rid of the dots all help would be appreciated. Here is the source code for the page.

   <ul class="articles">
     <% @articles.each do |article| %>
      <li class="excerpt">
        <%= sanitize(truncate(article.body, length: 250)) %>
          <div class="read-more">
           <%= link_to "Read more", article_path(article), class: 'btn btn-primary' %>
        </div>
      </li>
    <% end %>
   </ul>

Answer 1

That's because you're using an <li> element, which by default comes with nasty bullet points. See this question - add this to your CSS:

ul.articles
{
    list-style-type: none;
}

Answer 2

It's a bullet point, as part of a list. That makes sense, since you're rendering it in an unordered list.

If you want that to go away, it's a CSS style change in your articles class.

.articles {
    list-style-type:  none;
}