Override USER AGENT STYLE SHEET - Chrome

Question

I've got a list item that is being displayed on the webpage using the hover effect. Challenge i'm facing here is when i apply some border or background to the list item, it looks horrible because of the padding that is being generated automatically.

Look at this image please.

Anyone please help me to override it.

I already searched the forums but i only got how to turn it off from the console not to over ride it.

Answer 1

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.}

Answer 2

Just add the following style:

ul { padding:0 } 

That will override the default style.