How to Remove Indentation from an Unordered List Item

How to remove indentation from an unordered list item?

Set the list style and left padding to nothing.

ul {
    list-style: none;
    padding-left: 0;
}

ul {  list-style: none;  padding-left: 0;}

<ul>  <li>a</li>  <li>b</li>  <li>c</li></ul>

Removing ul indentation with CSS

This code will remove the indentation and list bullets.

ul {
    padding: 0;
    list-style-type: none;
}

http://jsfiddle.net/qeqtK/2/

Remove indentation from an unordered HTML list

Removing default padding-left (this indention ensures that the markers won't be pushed outside the list ) from ul and custom padding from li should work:

.content ul.searchlist { padding-left : 0; }
.content ul.searchlist li { padding : 10px 0; }

JSFiddle

Remove indent for element within an ordered list ol

I've come back to this with the answer I've settled on.

It seemed that changing the padding or the left position of the table element within the <ol> wasn't going to work, it just moved the table to the left and a gap appears at the right hand side. The easiest way to get around this was to put the table element outside of the <ol> and restart the <ol> block. By using a CSS counter, the numbering can be continued.

To achieve the counter continuation, I took some inspiration from this topic: How to start a new list, continuing the numbering from the previous list?

However, I didn't like the need to apply a special class to the <ol> blocks; in my view, they've done nothing wrong here and it's the inclusion of the mid-way element that's special. So, to indicate in the CSS that the numbering should be continued, I tried a CSS selector like:ol + table + ol. This targets the <ol> after the table which follows the initial <ol>. The continuing counter consideration is then made there by stipulating that counter-reset is none.

To avoid all <ol> continuing when these three elements are in a sequence, a class (mid-ol) can be added to the table and the CSS selector can be: ol + table.mid-ol + ol ...but, in fact, why stop there? You could have ANY element with the mid-ol class in the midst of a couple of <ol> elements (e.g. a div, which might be useful!), so the selector becomes: ol + .mid-ol + ol. I've checked that if you remove the class from the table that the second <ol> will start its counter reset.

The following link to a JSFiddle should illustrate the solution:
https://jsfiddle.net/r7u4vgtz/

The only drawback of this answer is if you would like to start your first <ol> with a number that is not 1. That's not the point of this question, so I've not gone that far.

Also, there was an issue with having <p> elements in the <li> elements after the counter related styling was added; the <p> elements were taking a new line, which they didn't do before. So I added that any <p> elements with an <li> parent were displayed inline, but then any subsequent <p> elements were displayed block, as usual.

For those who are browsing these answers and don't want to mess about with JSFiddle, here's a simple example HTML code for the answer:

<html>
  <head>
    <style  type="text/css">

      table {
        width:100%; 
        border-top-style:solid; 
        border-top-width:1px; 
        border-top-color:#d3d3d3; 
        border-bottom-style:solid; 
        border-bottom-width:1px; 
        border-bottom-color:#d3d3d3;
      }

      ol { 
        counter-reset: mycounter; 
      }

      ol li { 
        counter-increment: mycounter;
        list-style-type: none;
      }

      ol li:before { 
        content: counter(mycounter) ". ";
        margin-left:-1.3em;
      }

      ol + .mid-ol + ol {
        counter-reset: none;
      }

      li > p {
        display: inline;
      }
      li > p + p {
        display: block;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>
        <p>A list item with this paragraph element.</p>
      </li>
      <li>
        <p>Another list element using a paragraph element</p>
        <p>But with another paragraph within the same <li> to check that the paragraph styling is good. It seems that it is.  This second block uses display:block, as is proper for a paragraph.</p>
        <p>Here's a third paragraph in the same <li> element.  Now we can be sure the styling is good!</p>
      </li>
    </ol>
    <table cellspacing="0" class='mid-ol'>
       <col style="width: 48pt;" />
       <col style="width: 396pt;" />
       <tr>
         <td>
           <img src="http://woodworkingvdo.com/wp-content/uploads/2014/02/small-tables-9.jpg" style="width:42px; height:auto;" />
         </td>
         <td>
           <p>This table is not indented, as it's actually outside of the <ol> block.</p>
           <p>It is defined as a .mid-ol class element, which allows special consideration for subsequent <ol> blocks.</p>
         </td>
       </tr>
     </table>
     <ol>
       <li>
         <p>Last list item element.</p>
       </li>
     </ol>
   </body>
 </html>

How to remove indentation of list items

You are not selecting the ul to remove all its styles. Try this:

ul.homepageNavButtonsList {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

You had .homepageNavButtonsList ul with padding-left: none and of course you didn't have any ul inside the .homepageNavButtonsList

CSS Can't remove indentation from a bulleted list

You have an error in your HTML.

<ul class=:wp-block-categories wp-block-categories-list">

should be

<ul class="wp-block-categories wp-block-categories-list">

As for your CSS, one of these is the most likely:

The li may have a margin as well. try .entry-content ul li { margin-left: 0; }
Your selector isn't specific enough, try .entry-content ul.wp-block-categories-list instead
Your ul may have margin instead of padding (doubtful)

You can try and diagnose these with DevTools/your browsers inspector, it will show you all of the positions/margins/paddings and everything related to the element's bounding box: screenshot of dev tools

Remove li indentation

Browsers ship a default styling attached to <ul/> and <li/> tags

ul,li { list-style-type: none;
        list-style-position:inside;
        margin:0;
        padding:0; }

http://meyerweb.com/eric/tools/css/reset/