Override USER AGENT STYLE SHEET - Chrome

What you are seeing there is a "user agent style" (it shows "user agent stylesheet" as source).
UA styles are boilerplate rules that are introduced by your browser to have some conformity across web pages. You can simply override it.

Style declarations can come from multiple places and have different precedence depending on the source (from lowest to highest)*:

Name       │  Source
───────────┼────────────────────
user agent │ Browser  
author     │ You (the content creator)  
User       │ end user (the person using your website)
Precedence │ Source                    
───────────┼────────────────────────────────────────────────────────────────────
Lowest   0 │ user agent styles => these are the styles you see in the screenshot
         1 │ User styles
         2 │ author CSS styles => beware CSS precedence rules (link below)!
         3 │ author inline styles
         4 │ author CSS styles with `!important`
         5 │ author inline styles with `!important`
Highest  6 │ User styles with `!important`

Since the styles in your screenshot are UA styles (lowest precedence) all you need is to declare a style rule in your css to overwrite them:

ul { padding:0 }

Side note: As you can see, User styles have highest precedence. So if a User would declare their own styles with !important, there is nothing you can do about it as author, you cannot overrule those styles. (Which makes sense, because as the end user I want to know I have the final say in how things look like in my browser).

* In real life, the cascading nature is more complex than the following list shows, but I didn't cover it for the sake of simplicity. If you are interested, take a look into CSS precendence.


Just add the following style:

ul { padding:0 } 

That will override the default style.