Remove the top margin of header in bootstrap

Question

HTML

<div class="container-fluid">
  <div class="row">
    <div class="page-header header_site">
      <h1><font>ABC Company</font></h1>
    </div>
  </div>
</div>

CSS Code:

.header_site {
  background-color: darkblue;
}

font {
  color: white;
  margin: auto 160px auto 160px;
}

I want to remove the top-margin as marked in the following figure.

Answer 1

give your h1 and page header a margin-top of 0 and make sure your body doesn't have any padding:

body { padding: 0; }
.page-header,
.page-header h1 {margin-top:0;}

Example bootply

If you need your h1 to move down a bit, then give it padding-top

Answer 2

对于 Bootstrap 3，只需添加类“媒体标题”

<h1 class="media-heading"><font>ABC Company</font></h1>

Answer 3

Modify the style as below

.header_site {
  background-color: darkblue;
  margin:0;
  float:left;
  width:100%
}

Answer 4

h3 {
  margin-top: revert !important;
  margin-bottom: revert !important;
}

It revert h3 style to browser style. developer.mozilla.org said it does not work on chrome but I checked and it works well.

Answer 5

Please add the below css .In default HTML have it's own margin for h1 tag that's why its happening add margin-top:0; in .page-header h1 class.

.page-header h1 { margin-top: 0; }

 .header_site { background-color: darkblue; } font { color: white; margin: auto 160px auto 160px; } .page-header h1 { margin-top: 0; }

 <div class="container-fluid"> <div class="row"> <div class="page-header header_site"> <h1><font>ABC Company</font></h1> </div> </div> </div>

Answer 6

Just rewrite class page-header and tag <h1> :

.page-header {
  margin: 0 0 20px;
}
.page-header h1 {
  margin-top: 0;
}

jsfiddle-link