0

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: enter image description here

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.

ksav
  • 20,015
  • 6
  • 46
  • 66
PhoenixCMS
  • 11
  • 5

2 Answers2

1

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.

ksav
  • 20,015
  • 6
  • 46
  • 66
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

user14645831
  • 1
  • 1