Bullets from ul/li inside a div (in narrow view) are outside the div

[mixmastamyk]

Hi, the Alabaster sphinx theme has a problem when an unordered list is inside a div (such as sidebar) and the width of the window is narrow (such as mobile device). The bullets go outside the left border of the div.

Problem is here in the css:

https://github.com/bitprophet/alabaster/blob/master/alabaster/static/alabaster.css_t#L578

@media screen and (max-width: 870px) {
    ul {
    	margin-left: 0;
    }

	li > ul {
        /* Matches the 30px from the "ul, ol" selector above */
		margin-left: 30px;
	}

This doesn't work well because the ul element needs a little margin/padding on the left to make room for the bullets which by default go outside of the li elements.

Similar as described in this stackoverflow question:

https://stackoverflow.com/questions/19006653/bullets-in-unordered-list-not-contained-within-the-block/58574465#58574465

I use this css locally to override it:

@media screen and (max-width: 870px) {
    ul {
        margin-left: 2em !important;
    }
    li > ul {
        margin-left: 0;
    }
}

It's not perfect either. ;-)