Question: I have a bullet-ed un-ordered list of ingredients on my recipe site. I have some padding around the list so that it is displayed in the center of the page. However, when I go to view the page on an iphone or a tablet (a device with a narrower screen), my bullet points are pushed to 2 lines and the second line is not in line with the first. 

I believe this is due to the padding code I have around the list so that on a narrow screen, the bullets are still in the center of the page. When the bullet point is too long that it has to go to 2 lines, the second line is pushed all the way to the left while the bullet is still centered. I am looking to align the second line with the first (still centered on the page)

I have tried positioning it 'outside' the bullet point, however, because I have made my own bullet point with code this doesn't seem to work.

The code below is the code I have for the cellular device display of this issue. 

```
    @media only screen and (max-width : 480px)
    { ul[data-rte-list] li>*:first-child::before  {
        content: "•";
        position: outside;
        line-height: 1.5em !important;
        top: 2px;
        padding-right: 10px;
        font-size: 22px;
        padding-left: 100px;
        color: #373737;
        opacity: .4;
    }

}

```

This is exactly what the page looks like:

![how the page looks](https://i.stack.imgur.com/c2mdf.png)

Answer: 
You are applying the padding to the ::before selector of each `<li>` element.
Remove it from there and add it to the `<ul>` element. 

```
@media only screen and (max-width : 480px)
{ 
    ul[data-rte-list] {
        padding-left: 100px;
    }

    ul[data-rte-list] li>*:first-child::before  {
        content: "•";
        position: outside;
        line-height: 1.5em !important;
        top: 2px;
        padding-right: 10px;
        font-size: 22px;
        color: #373737;
        opacity: .4;
   }
}

```
This is just a wild attempt but from the way I see it you're applying the `padding` to the child elements of your `li`. You should apply it to the `ul` element so that the entire list is padded.

```css
div {
  width: 400px;
  margin: auto;
  background-color: #dadada;
}

ul {
  list-style: none;
  padding-left: 100px;
}

ul li > *:first-child::before {
  content: "•";
  position: outside;
  line-height: 1.5em !important;
  top: 2px;
  padding-right: 10px;
  font-size: 22px;
  color: #373737;
  opacity: 0.4;
}
```

```html
<div>
<ul>
  <li>
    <span>1 can coconut milk</span>
  </li>
  <li>
    <span>1/4 cup date syrup (substitute maple syrup or honey)</span>
  </li>
  <li>
    <span>1 tsp vanilla</span>
  </li>
</ul>
</div>
```