My Custom.css not working

Question

When I inspect a web page I encounter an section element as section#sp-bottom

In the styles console, I see

#sp-bottom (
   margin: 10px 0px 0px 0px;
}

When I change the above 10px to 0px, I can see the page margin of 10px disappear.

Then in my custom.css of the template, i added

#sp-bottom {
   margin: 0px 0px 0px 0px;
}

But after clearing cache the page & browsing history, i still shows the 10px

Some please teach.

Have you `link`ed your stylesheet in your `index.html` file? — DevNebulae, Aug 21 '17 at 11:19
Are there other CSS files besides the custom.css one? Also, you cannot override a selector `section#sp-bottom` by writing `#sp-bottom` later on. — Mr Lister, Aug 21 '17 at 11:43

score 0 · Answer 1 · edited Aug 21 '17 at 11:22

0

Try increasing more specificity by adding the tag name(section) to the css selector,

section#sp-bottom {
   margin: 0;
}

edited Aug 21 '17 at 11:22

Manish Patel

answered Aug 21 '17 at 11:19

Saravanan I

score 0 · Answer 2 · answered Aug 21 '17 at 11:22

0

You can try This.

section#sp-bottom{ margin:0px;}

answered Aug 21 '17 at 11:22

Pravin Vavadiya

Thanks to all of you. – user2782291 Aug 21 '17 at 12:09
By using section#sp-bottom{ margin: o;}, it caught fix – user2782291 Aug 21 '17 at 12:10

score 0 · Answer 3 · answered Aug 21 '17 at 11:58

0

You might want to see this question.

I feel that your trying to edit your css through the browser. The content is in the memory therefore when you clear the cache it resets.

answered Aug 21 '17 at 11:58

Hash

score 0 · Answer 4 · answered Aug 21 '17 at 12:05

0

Try this

#sp-bottom {
   margin:0px !important;
}

answered Aug 21 '17 at 12:05

Roshan Bhattarai

4 Answers4