How to Remove Unwanted List Indentation in CSS?

Removing List Indentation with CSS: A Comprehensive Guide

Unwanted indentation in unordered lists, particularly when lines wrap, can be frustrating. Here's an in-depth solution to resolve this issue.

In your example, the indentation occurs due to the use of float: left on

elements. This creates a block-level element that fills the space horizontally. Additionally, the use of margins on the parent container #info may also contribute to the indentation.

To eliminate the indentation, implement the following CSS:

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

This code removes any padding that may exist in the

element and hides the default list bullets.

You may have previously attempted to set margin and padding to zero, but this alone may not suffice. By setting both properties to zero on the

and adjusting the float and width properties of the
• elements, you can eliminate the unwanted space:

  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  In conjunction with these style changes, you may need to adjust the margins or positioning of the parent container #info to achieve the desired layout.

  Here's a revised version of your HTML/CSS with the suggested changes:

  <div>
  <pre class="brush:php;toolbar:false">#info {
    color: #FFFFFF;
    margin: 0 auto;
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #FFF;
    padding: 20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
  }
  
  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  After applying these changes, the unwanted indentation should disappear, aligning the list items flush with the left edge.