I have a list with a custom bullet type:
[![enter image description here](https://i.stack.imgur.com/ptOES.png)](https://i.stack.imgur.com/ptOES.png)

This works exactly how I want. The list item's text wraps without going under the custom bullet, the bullet is aligned with the rest of the page, etc. What I'm not happy with is that I've accomplished this using a hard-coded padding value:

```html
<ul style= "list-style-position:outside;padding-left:86.3167px;">
    <!-- list item -->
</ul>

```

Is there a way to accomplish this without having the hard-coded value?

Full example:

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Cool Website</title>
    <style>
         html {
             font-family: sans-serif;
         }

         body {
             margin: 0;
             padding: 0 20px 20px 20px;
             line-height: 1.4em;
             margin-left: auto;
             margin-right: auto;
         }
    </style>
</head>
<body>
    <div>
        <h1>My Cool Website</h1>
    </div>
    <ul style=
    "list-style-position:outside;padding-left:86.3167px;">
        <li style="list-style-type:'2022-04-18 ';">
            <a href=
            "/blog/my-long-blog-post-title-that-spans-two-lines-on-my-blog-site">
            my long blog post title that spans two lines on my blog
            site</a>
        </li>
    </ul>
</body>
</html>

```

I tried an `inside` style but that puts the wrapped text under the bullet item:
[![enter image description here](https://i.stack.imgur.com/8dvae.png)](https://i.stack.imgur.com/8dvae.png)

```
<ul style="list-style-position:inside;padding-left:0;">
    <!-- list item -->
</ul>

```