Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Termos, variáveis, expressões ou referências devem ser SEMPRE mantidos em inglês.
      3. Apenas transcreva o artigo para um inglês mais simples, tornando ele mais literal e direto, sem alterar o contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      #thedivisor#In our finished example, we have styled the unordered list like so (on top of what you've already seen above):#thedivisor#Here we've done the following:#thedivisor#<li>
    <p>Set the <a href="/en-US/docs/Web/CSS/padding-left"><code>padding-left</code></a> of the <a href="/en-US/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a> down from the default <code>40px</code> to <code>20px</code>, then set the same amount on the list items. This is so that, overall, the list items are still lined up with the ordered list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.</p>
  </li>
  <li>
    <p>Set the <a href="/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> to <code>none</code>, so that no bullet appears by default. We're going to use <a href="/en-US/docs/Web/CSS/background"><code>background</code></a> properties to handle the bullets instead.</p>
  </li>
  <li>
    <p>Inserted a bullet onto each unordered list item. The relevant properties are as follows:</p>
    <ul>
      <li><a href="/en-US/docs/Web/CSS/background-image"><code>background-image</code></a>: This references the path to the image file you want to use as the bullet.</li>
      <li><a href="/en-US/docs/Web/CSS/background-position"><code>background-position</code></a>: This defines where in the background of the selected element the image will appear — in this case we are saying <code>0 0</code>, which means the bullet will appear in the very top left of each list item.</li>
      <li><a href="/en-US/docs/Web/CSS/background-size"><code>background-size</code></a>: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of <code>1.6rem</code> (<code>16px</code>), which fits very nicely with the <code>20px</code> padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.</li>
      <li><a href="/en-US/docs/Web/CSS/background-repeat"><code>background-repeat</code></a>: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of <code>no-repeat</code>.</li>
    </ul>
  </li>#thedivisor#Set the <a href="/en-US/docs/Web/CSS/padding-left"><code>padding-left</code></a> of the <a href="/en-US/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a> down from the default <code>40px</code> to <code>20px</code>, then set the same amount on the list items. This is so that, overall, the list items are still lined up with the ordered list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.#thedivisor#Set the <a href="/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> to <code>none</code>, so that no bullet appears by default. We're going to use <a href="/en-US/docs/Web/CSS/background"><code>background</code></a> properties to handle the bullets instead.#thedivisor#Inserted a bullet onto each unordered list item. The relevant properties are as follows:#thedivisor#<li><a href="/en-US/docs/Web/CSS/background-image"><code>background-image</code></a>: This references the path to the image file you want to use as the bullet.</li>
      <li><a href="/en-US/docs/Web/CSS/background-position"><code>background-position</code></a>: This defines where in the background of the selected element the image will appear — in this case we are saying <code>0 0</code>, which means the bullet will appear in the very top left of each list item.</li>
      <li><a href="/en-US/docs/Web/CSS/background-size"><code>background-size</code></a>: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of <code>1.6rem</code> (<code>16px</code>), which fits very nicely with the <code>20px</code> padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.</li>
      <li><a href="/en-US/docs/Web/CSS/background-repeat"><code>background-repeat</code></a>: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of <code>no-repeat</code>.</li>#thedivisor#This gives us the following result:#thedivisor#<img src="/en-US/docs/Learn/CSS/Styling_text/Styling_lists/list_formatting.png" alt="an unordered list with the bullet points set as little star images" width="124" height="106" loading="lazy">#thedivisor#The three properties mentioned above can all be set using a single shorthand property, <a href="/en-US/docs/Web/CSS/list-style"><code>list-style</code></a>. For example, the following CSS: