Search code examples
htmlcsscss-grid

How to remove margin to left of ul positioned with grid

I have a very simple grid:

#grid{
  display: grid;
  grid-template-columns:  1fr 1fr 1fr;
  list-style-type: none;
}

to style ten list items:

  <body>
    <ul id="grid">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>

    </ul>
  </body>

The above code outputs a grid that has a margin on the left side, how can I remove this (https://jsfiddle.net/0z9xuyc4/2/)?

Solution

  • <ul> element has a default left padding of 40px (Source).

    Add padding-left: 0 style to your #grid {} selector and it will work as you want to.

    In future you can use Web Inspector in the browser to see if it's a padding or margin.