How do I make my page respect h1 css addition?

Question

I add

h1 {
    margin-top:100px;
}

to the end of the css, but the page doesn't change. But if I add to the html of some h1:

<h1 style="margin-top:100px;"><a class="toc-backref" href="#id4">KHotKeys</a><a class="headerlink" href="#khotkeys" title="Permalink to this headline">¶</a></h1>

Then it does.

I'm not css pro, and I guess the problem is somewhere in the css file. Here it is:

div.clearer {
    clear: both;
}

/* -- relbar ---------------------------------------------------------------- */

div.related {
    width: 100%;
    font-size: 90%;
}

div.related h3 {
    display: none;
}

div.related ul {
    margin: 0;
    padding: 0 0 0 10px;
    list-style: none;
}

div.related li {
    display: inline;
}

div.related li.right {
    float: right;
    margin-right: 5px;
}

/* -- sidebar --------------------------------------------------------------- */

div.sphinxsidebarwrapper {
    padding: 10px 5px 0 10px;
}

div.sphinxsidebar {
    float: left;
    width: 230px;
    margin-left: -100%;
    font-size: 90%;
}

div.sphinxsidebar ul {
    list-style: none;
}

div.sphinxsidebar ul ul,
div.sphinxsidebar ul.want-points {
    margin-left: 20px;
    list-style: square;
}

div.sphinxsidebar ul ul {
    margin-top: 0;
    margin-bottom: 0;
}

div.sphinxsidebar form {
    margin-top: 10px;
}

div.sphinxsidebar input {
    border: 1px solid #98dbcc;
    font-family: sans-serif;
    font-size: 1em;
}

div.sphinxsidebar input[type="text"] {
    width: 160px;
}

div.sphinxsidebar input[type="submit"] {
    width: 30px;
}

img {
    border: 0;
}

/* -- search page ----------------------------------------------------------- */

ul.search {
    margin: 10px 0 0 20px;
    padding: 0;
}

ul.search li {
    padding: 5px 0 5px 20px;
    background-image: url(file.png);
    background-repeat: no-repeat;
    background-position: 0 7px;
}

ul.search li a {
    font-weight: bold;
}

ul.search li div.context {
    color: #888;
    margin: 2px 0 0 30px;
    text-align: left;
}

ul.keywordmatches li.goodmatch a {
    font-weight: bold;
}

/* -- index page ------------------------------------------------------------ */

table.contentstable {
    width: 90%;
}

table.contentstable p.biglink {
    line-height: 150%;
}

a.biglink {
    font-size: 1.3em;
}

span.linkdescr {
    font-style: italic;
    padding-top: 5px;
    font-size: 90%;
}

/* -- general index --------------------------------------------------------- */

table.indextable {
    width: 100%;
}

table.indextable td {
    text-align: left;
    vertical-align: top;
}

table.indextable dl, table.indextable dd {
    margin-top: 0;
    margin-bottom: 0;
}

table.indextable tr.pcap {
    height: 10px;
}

table.indextable tr.cap {
    margin-top: 10px;
    background-color: #f2f2f2;
}

img.toggler {
    margin-right: 3px;
    margin-top: 3px;
    cursor: pointer;
}

div.modindex-jumpbox {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 1em 0 1em 0;
    padding: 0.4em;
}

div.genindex-jumpbox {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 1em 0 1em 0;
    padding: 0.4em;
}

/* -- general body styles --------------------------------------------------- */

a.headerlink {
    visibility: hidden;
}

h1:hover > a.headerlink,
h2:hover > a.headerlink,
h3:hover > a.headerlink,
h4:hover > a.headerlink,
h5:hover > a.headerlink,
h6:hover > a.headerlink,
dt:hover > a.headerlink {
    visibility: visible;
}

div.body p.caption {
    text-align: inherit;
}

div.body td {
    text-align: left;
}

.field-list ul {
    padding-left: 1em;
}

.first {
    margin-top: 0 !important;
}

p.rubric {
    margin-top: 30px;
    font-weight: bold;
}

img.align-left, .figure.align-left, object.align-left {
    clear: left;
    float: left;
    margin-right: 1em;
}

img.align-right, .figure.align-right, object.align-right {
    clear: right;
    float: right;
    margin-left: 1em;
}

img.align-center, .figure.align-center, object.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

/* -- sidebars -------------------------------------------------------------- */

div.sidebar {
    margin: 0 0 0.5em 1em;
    border: 1px solid #ddb;
    padding: 7px 7px 0 7px;
    background-color: #ffe;
    width: 40%;
    float: right;
}

p.sidebar-title {
    font-weight: bold;
}

/* -- topics ---------------------------------------------------------------- */

div.topic {
    border: 1px solid #ccc;
    padding: 7px 7px 0 7px;
    margin: 10px 0 10px 0;
}

p.topic-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 10px;
}

/* -- admonitions ----------------------------------------------------------- */

div.admonition {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 7px;
}

div.admonition dt {
    font-weight: bold;
}

div.admonition dl {
    margin-bottom: 0;
}

p.admonition-title {
    margin: 0px 10px 5px 0px;
    font-weight: bold;
}

div.body p.centered {
    text-align: center;
    margin-top: 25px;
}

/* -- tables ---------------------------------------------------------------- */

table.docutils {
    border: 0;
    border-collapse: collapse;
}

table.docutils td, table.docutils th {
    padding: 1px 8px 1px 5px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #aaa;
}

table.field-list td, table.field-list th {
    border: 0 !important;
}

table.footnote td, table.footnote th {
    border: 0 !important;
}

th {
    text-align: left;
    padding-right: 5px;
}

table.citation {
    border-left: solid 1px gray;
    margin-left: 1px;
}

table.citation td {
    border-bottom: none;
}

/* -- other body styles ----------------------------------------------------- */

ol.arabic {
    list-style: decimal;
}

ol.loweralpha {
    list-style: lower-alpha;
}

ol.upperalpha {
    list-style: upper-alpha;
}

ol.lowerroman {
    list-style: lower-roman;
}

ol.upperroman {
    list-style: upper-roman;
}

dl {
    margin-bottom: 15px;
}

dd p {
    margin-top: 0px;
}

dd ul, dd table {
    margin-bottom: 10px;
}

dd {
    margin-top: 3px;
    margin-bottom: 10px;
    margin-left: 30px;
}

dt:target, .highlighted {
    background-color: #fbe54e;
}

dl.glossary dt {
    font-weight: bold;
    font-size: 1.1em;
}

.field-list ul {
    margin: 0;
    padding-left: 1em;
}

.field-list p {
    margin: 0;
}

.refcount {
    color: #060;
}

.optional {
    font-size: 1.3em;
}

.versionmodified {
    font-style: italic;
}

.system-message {
    background-color: #fda;
    padding: 5px;
    border: 3px solid red;
}

.footnote:target  {
    background-color: #ffa;
}

.line-block {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
}

.line-block .line-block {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 1.5em;
}

.guilabel, .menuselection {
    font-family: sans-serif;
}

.accelerator {
    text-decoration: underline;
}

.classifier {
    font-style: oblique;
}

/* -- code displays --------------------------------------------------------- */

pre {
    overflow: auto;
    overflow-y: hidden;  /* fixes display issues on Chrome browsers */
}

td.linenos pre {
    padding: 5px 0px;
    border: 0;
    background-color: transparent;
    color: #aaa;
}

table.highlighttable {
    margin-left: 0.5em;
}

table.highlighttable td {
    padding: 0 0.5em 0 0.5em;
}

tt.descname {
    background-color: transparent;
    font-weight: bold;
    font-size: 1.2em;
}

tt.descclassname {
    background-color: transparent;
}

tt.xref, a tt {
    background-color: transparent;
    font-weight: bold;
}

h1 tt, h2 tt, h3 tt, h4 tt, h5 tt, h6 tt {
    background-color: transparent;
}

.viewcode-link {
    float: right;
}

.viewcode-back {
    float: right;
    font-family: sans-serif;
}

div.viewcode-block:target {
    margin: -1px -10px;
    padding: 0 10px;
}

/* -- math display ---------------------------------------------------------- */

img.math {
    vertical-align: middle;
}

div.body div.math p {
    text-align: center;
}

span.eqno {
    float: right;
}

/* -- printout stylesheet --------------------------------------------------- */

@media print {
    div.document,
    div.documentwrapper,
    div.bodywrapper {
        margin: 0 !important;
        width: 100%;
    }

    div.sphinxsidebar,
    div.related,
    div.footer,
    #top-link {
        display: none;
    }
}

body {
    font-family: sans-serif;
    font-size: 100%;
    background-color: #11303d;
    color: #000;
    margin: 0;
    padding: 0;
}

div.document {
    background-color: #d4e9f7;
}

div.documentwrapper {
    float: left;
    width: 100%;
}

div.bodywrapper {
    margin: 0 0 0 230px;
}

div.body {
    background-color: #ffffff;
    color: #222222;
    padding: 0 20px 30px 20px;
}

div.footer {
    color: #ffffff;
    width: 100%;
    padding: 9px 0 9px 0;
    text-align: center;
    font-size: 75%;
}

div.footer a {
    color: #ffffff;
    text-decoration: underline;
}

div.related {
    background-color: #191a19;
    line-height: 30px;
    color: #ffffff;
}

div.related a {
    color: #ffffff;
}

div.sphinxsidebar {
    top: 30px;
    bottom: 60px;
    margin: 0;
    position: fixed;
    overflow: auto;
    height: auto;
}

div.sphinxsidebar h3 {
    font-family: 'Trebuchet MS', sans-serif;
    color: #3a3a3a;
    font-size: 1.4em;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

div.sphinxsidebar h3 a {
    color: #3a3a3a;
}

div.sphinxsidebar h4 {
    font-family: 'Trebuchet MS', sans-serif;
    color: #3a3a3a;
    font-size: 1.3em;
    font-weight: normal;
    margin: 5px 0 0 0;
    padding: 0;
}

div.sphinxsidebar p {
    color: #3a3a3a;
}

div.sphinxsidebar p.topless {
    margin: 5px 10px 10px 10px;
}

div.sphinxsidebar ul {
    margin: 10px;
    padding: 0;
    color: #3a3a3a;
}

div.sphinxsidebar ul li {
    margin-top: .2em;
}

div.sphinxsidebar a {
    color: #3a8942;
}

div.sphinxsidebar input {
    border: 1px solid #3a8942;
    font-family: sans-serif;
    font-size: 1em;
}

/* -- body styles ----------------------------------------------------------- */

a {
    color: #355f7c;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

div.body p, div.body dd, div.body li {

    text-align: left;
    line-height: 130%;
    margin-top: 0px;
    margin-bottom: 0px;
}

div.body h1,
div.body h2,
div.body h3,
div.body h4,
div.body h5,
div.body h6 {
    font-family: 'Trebuchet MS', sans-serif;
    background-color: #f2f2f2;
    font-weight: normal;
    color: #20435c;
    border-top: 2px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    margin: 30px -20px 20px -20px;
    padding: 3px 0 3px 10px;
}

div.body h1 { margin-top: 0; font-size: 200%; }
div.body h2 { font-size: 160%; }
div.body h3 { font-size: 140%; padding-left: 20px; }
div.body h4 { font-size: 120%; padding-left: 20px; }
div.body h5 { font-size: 110%; padding-left: 20px; }
div.body h6 { font-size: 100%; padding-left: 20px; }

a.headerlink {
    color: #c60f0f;
    font-size: 0.8em;
    padding: 0 4px 0 4px;
    text-decoration: none;
}

a.headerlink:hover {
    background-color: #c60f0f;
    color: white;
}

div.body p, div.body dd, div.body li {
    text-align: left;
    line-height: 110%;
}

div.admonition p.admonition-title + p {
    display: inline;
}

div.note {
    background-color: #eee;
    border: 1px solid #ccc;
}

div.seealso {
    background-color: #ffc;
    border: 1px solid #ff6;
}

div.topic {
    background-color: #eee;
}

div.warning {
    background-color: #ffe4e4;
    border: 1px solid #f66;
}

p.admonition-title {
    display: inline;
}

p.admonition-title:after {
    content: ":";
}

pre {
    padding: 0px;
    background-color: #ffffff;
    color: #000000;
    line-height: 120%;
    border: 0px solid #ffffff;
    border-left: none;
    border-right: none;
    white-space: pre-wrap;
    /* word-wrap: break-word; */
    /* width:100px; */
}

tt {
    background-color: #ecf0f3;
    padding: 0 1px 0 1px;
    font-size: 110%;
}

.warning tt {
    background: #efc2c2;
}

.note tt {
    background: #d6d6d6;
}

body {
    width:150%;
}

Answer 1

Using Firebug or the Chrome Debugger, you can see which property overrides which other one. Then you will be able to see where, in your CSS file, the problem is.

For example, on this page, you can see that color and text-decoration are overridden by another style. Etc.:

The problem here is that the all.css has only one line of CSS inside. But you can see that each property can be found at a defined line in your file.

You can also add an !important to force this value to be the last one.

h1 {
    margin-top:100px !important;
}

Answer 2

What all answers so far forget to point out is why your override doesn't work.

You have this:

div.body h1 { margin-top: 0; font-size: 200%; }

And then you try to add this:

h1 { margin-top:100px; }

What you need now is to learn about specificity. div.body h1 is more specific than simply h1. You can only overwrite it with something that is at least as specific. E.g., with div.body h1, or div.body h1.class, or div.body h1#id.

There are plenty of handy specificity charts around if you google. Here's a Star-Wars themed one:

Oh, and the inline override works because inline CSS beats everything non-inline.

Answer 3

If you intent is to redefine margin-top on div.body h1 then you need to redefine it:

div.body h1 {
    margin-top: 100px;
}

If you intent is to redefine margin-top on all h1 then !important will overwrite all margin-top styles:

h1 {
    margin-top:100px !important;
}

Answer 4

h1 get override by div.body h1
Use this instead

div.body h1  {
    margin-top:100px;
}