How to align second line in a bullet-ed un-ordered list

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:

Answer 1

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;
   }
}

Answer 2

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.

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;
}

<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>

Answer 3

Building on the answer by uom-pregorio, you can make the list item a flexbox container to have all the text truly aligned with the first line.

I also moved the ::before sudo element to the <li> itself, so that it was not contained inside the <span>, as we want them to sit next to each other as siblings.

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

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

ul li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

ul li::before {
  content: "•";
  line-height: 1.5em !important;
  padding-right: 10px;
  font-size: 22px;
  color: #373737;
  opacity: 0.4;
  width: content;
  margin: 0;
}

ul li>*:first-child {
  flex-grow:2;
  padding-top: 0.5em;
}

<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>

See this site for more info: A Complete Guide to Flexbox