CSS & HTML | Have an HTML header stick to top of screen without padding [duplicate]

Question

I am trying to create a colored block/header at the top of my screen. I want it to hug the top, left, and the right/ Instead their appears to be some padding or a margin around it, which I do not want.

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

header {
  height: 100%;
  padding: 0;
}

.bg-primary {
  background-color: #ffcc80 !important;
}

.align-items-center {
  align-items: center !important;
}

.py-0 {
  padding-top: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.py-6 {
  padding-top: 4.5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 4.5rem !important;
}

.py-7 {
  padding-top: 6rem !important;
}

.pb-7,
.py-7 {
  padding-bottom: 6rem !important;
}

.py-8 {
  padding-top: 8rem !important;
}

<div class="header bg-primary pb-6">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center py-4">
      </div>
    </div>
  </div>
</div>

Here is a codepen: https://codepen.io/balFB373/pen/eYzwvBJ

I want it to look like this:

I have tried margin:0 !important; and padding:0 !important and it still does not work. I am new to CSS so I would appreciate the help.

Please add the css and html to your question.

ksav
– ksav

2020-11-21 03:10:39 +00:00
Commented Nov 21, 2020 at 3:10 — ksav
– ksav, Commented Nov 21, 2020 at 3:10

ksav · Accepted Answer · 2020-11-21 03:17:19Z

The html body element often comes with some default margin already set in some browsers' own vendor stylesheets.

You can override it with margin: 0;

body {
  margin: 0;
}

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

header {
  height: 100%;
  padding: 0;
  git-to-screen
}

.bg-primary {
  background-color: #ffcc80 !important;
}

.align-items-center {
  align-items: center !important;
}

.py-0 {
  padding-top: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.py-6 {
  padding-top: 4.5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 4.5rem !important;
}

.py-7 {
  padding-top: 6rem !important;
}

.pb-7,
.py-7 {
  padding-bottom: 6rem !important;
}

.py-8 {
  padding-top: 8rem !important;
}

<div class="header bg-primary pb-6">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center py-4">
      </div>
    </div>
  </div>
</div>

Related: See this question about Browsers' default CSS for HTML elements.

user14645831 · Accepted Answer · 2020-11-21 03:39:26Z

0

You can usr * selector to set margin and padding 0 of all elements and generally position sticky is used with top 0 in header element which is child of body not descendent to make it stick on top

answered Nov 21, 2020 at 3:39

user14645831

11 bronze badge

Collectives™ on Stack Overflow

CSS & HTML | Have an HTML header stick to top of screen without padding [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions