Where do the bullets come from on elements?

The bullets are contained “within” the padding of <ul> element:

The padding is marked green and the margin orange:

Decreasing the padding shows that the bullets are “within” that padding:

Increasing the margin of the <ul> for example, shifts it right.

The list-style property controls the bullets themselves. Setting it to none will hide them. You would need to set the margin and padding to 0 if you want to get rid of the indent too.

ul
{
    list-style: none;
}

If you want to get rid of all margins / paddings and the bullet points, use this:

ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

Of course, you can also apply bullets to other HTML controls:

div
{
    padding-left: 40px;
}
a
{
    display: list-item;
    list-style: disc;
}

<div>
    <a href="#">Item #1</a>
    <a href="#">Item #2</a>
    <a href="#">Item #3</a>
    <a href="#">Item #4</a>
</div>