Header being covered when i try to add a background to my main section

Question

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tyler</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <a href="index.html" class="header-brand">bioxm</a>
      <nav>
        <ul>

          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="about.html">About Me</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <a href="cases.html" class="header-cases">Cases</a>
      </nav>
    </header>
    <main>
      <section class="index-banner">
        <h2>I AM A FREELANCE WEB<br>DEVELOPER</h2>
        <h1>With specialty in back-end development, functionality, UX design, and Search Engine Optimization</h1>
      </section>
    </main>
    <footer>

    </footer>
  </body>
</html>

The header section is being covered when I try to add a background to the main.It looks like I have everything closed off correctly and I cannot see why its cutting into my header. Here is my CSS https://pastebin.com/8rbGmQ7R

Problem: https://i.stack.imgur.com/6NN3c.jpg

try using the z-index property on your header. Each DOM element starts at z-index: 0; set the headers z-index to 1. this will change the depth of that element making it appear above anything less than z-index: 1; — , Jan 04 '19 at 04:38

score 1 · Accepted Answer · answered Jan 04 '19 at 05:20

On line 132 of your paste bin you have the li elements of the nav set to float:left which removes them from the static flow. This leaves the li and nav with a height of 0. You can set explicit heights, but if you just remove this line you'll see it working as expected, and you can just adjust your styles from there if needed.

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*MY CODE*/

* {
  text-decoration: none;
}

body {
  background-color: #f3f3f3
}

header {
  background-color: white;
  width: 100%;
  height: 100%;
}

header .header-brand {
  font-family: Indie Flower;
  font-size: 24px;
  color: #111;
  font-weight: 900;
  text-transform: uppercase;
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0px;
}

header nav ul {
  display: block;
  margin: 0 auto;
  width: fit-content;
}

header nav ul li {
  display: inline-block;
  /*float: left;*/
  list-style: none;
  padding: 0 16px;
}

header nav ul li a {
  font-family: Indie Flower;
  font-size: 16px;
  color: #111;
}

header .header-cases {
  display: none;
}

/*INDEX*/
.index-banner {
  width: 100%;
  height: calc(100vh - 100px);
  background-image: url('images/programmer.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.index-banner h2 {
  font-family: ZCOOL KuaiLe;
  font-size: 50px;
  color: #fff

}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tyler</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <a href="index.html" class="header-brand">bioxm</a>
      <nav>
        <ul>

          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="about.html">About Me</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <a href="cases.html" class="header-cases">Cases</a>
      </nav>
    </header>
    <main>
      <section class="index-banner">
        <h2>I AM A FREELANCE WEB<br>DEVELOPER</h2>
        <h1>With specialty in back-end development, functionality, UX design, and Search Engine Optimization</h1>
      </section>
    </main>
    <footer>

    </footer>
  </body>
</html>

score 1 · Answer 2 · answered Jan 04 '19 at 05:23

you have 2 options

You can remove the float left of the nav li elements
Or You should clear the nav element using after css to give the floated element height to the header element.

http://jsfiddle.net/fdwmxn70/

header nav  ul:after {
    clear: both;
    content: '';
    display: block;
}

Please refer Why doesn't the height of a container element increase if it contains floated elements?

Header being covered when i try to add a background to my main section

2 Answers2