Changing margin-top to div in CSS

Question

I am trying to change the margin-top property of a div in a WordPress theme, however it does not seem to work. I have added the following line to the custom css stylesheet:

 div#primary {
     display: block;
     margin-top:50px;
   }

However the div whose property I want to change does not move down. The example can be found at the following URL: http://who.designbond.co.uk/contact-2/ The div I need to move down is the one containing the text of Phylosophy. Can anyone explain to me what I am doing wrong? Thanks

Solution 1

div#primary {
     display: block;
     margin-top:50px !important;
}

I know it's not a good thing to do (adding !important), but it can help.

Solution 2

That div has an inline style with margin-top: 0px, which is overriding your stylesheet.

You need to remove or modify that inline style, or (in a pinch, and don't tell anyone I said this) add !important to your stylesheet rule).

Solution 3

Something is setting some inline styling on that div. You can override it using !important.

#primary {
    margin-top: 50px !important;
}

Also, since there is an id on that element you css selector can be simplified to #primary instead of div#primary

Solution 4

I see that the div with id primary has a in line stylesheet. Inline style sheet takes priority over class based style sheet. Your inline stylesheet has margin-top:0px, which is ignoring your class based styling. remove it and it will work.

View more solutions