I have a working CSS only navbar with hamburger menu but all other HTML content displays inline and not as block elements

Question

I'm trying to get a CSS only repsponsive navbar working, I've set a breakpoint that displays a hamburger menu at 768px and below, I have the navbar working fine but when I try to add any content below the navbar when the breakpoint is above 768px the content displays inline and not as a block element.

Like this:

Screenshot of H1 tag displaying inline

I've tried adding a CSS grid hoping it would separate the navbar from the other elements.

.header {
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li {
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
}

.header ul a {
  display: block;
  padding: 5px 20px;
  text-decoration: none;
}

.header ul a:hover {
  color: #BDBDBD;
}

.header .logo {
  float: left;
  display: block;
  font-size: 2em;
  padding: 10px 20px;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  padding: 28px 20px;
  position: relative;
  float: right;
  cursor: pointer;
}

.header .menu-icon .nav-icon {
  background: #cccccc;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2s ease-out;
}

.header .menu-icon .nav-icon:before {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: 5px;
}

.header .menu-icon .nav-icon:after {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: -5px;
}

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .nav-icon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top: 0;
}

.header .menu-btn:checked~.menu-icon .nav-icon::after {
  transform: rotate(45deg);
  top: 0;
}

@media (min-width:48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

<header class="header">
  <a href="/" class="logo">LK</a>
  <input class="menu-btn" type="checkbox" id="menu-btn">
  <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Browse</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<div>
  <h1>This is a heading</h1>
</div>

Answer 1

To keep the same effect and display the h1 on a new tag I would suggest to add min-height as follows:

.header {
    display: block;
    min-height: 5vh; // adjust it as you need
    z-index: 3;
}

Answer 2

The problem arises from the float.

You need to clear after it.

This snippet just puts a clear: both into the div as a demo.

.header {
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li {
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
}

.header ul a {
  display: block;
  padding: 5px 20px;
  text-decoration: none;
}

.header ul a:hover {
  color: #BDBDBD;
}

.header .logo {
  float: left;
  display: block;
  font-size: 2em;
  padding: 10px 20px;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  padding: 28px 20px;
  position: relative;
  float: right;
  cursor: pointer;
}

.header .menu-icon .nav-icon {
  background: #cccccc;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
  transition: background .2s ease-out;
}

.header .menu-icon .nav-icon:before {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: 5px;
}

.header .menu-icon .nav-icon:after {
  background: #cccccc;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
  top: -5px;
}

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.header .menu-btn:checked~.menu-icon .nav-icon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top: 0;
}

.header .menu-btn:checked~.menu-icon .nav-icon::after {
  transform: rotate(45deg);
  top: 0;
}

@media (min-width:48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

<header class="header">
  <a href="/" class="logo">LK</a>
  <input class="menu-btn" type="checkbox" id="menu-btn">
  <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Browse</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<div style="clear: both;">
  <h1>This is a heading</h1>
</div>

Answer 3

you can inspect your html+css with chrome dev tool.

we can see in the picture:

1. your content is block
2. all content of header is float, so all content is not in normal flow and header has height: 0;
3. with 1 and 2. content will show front the top of the page.
4. in your screen shot. the page is not width enough to display all text and wrap to the next line. which makes you think is is inline.

so we can solve this:

.header {
   overflow: hidden
}

this trigger BFC in header. so it can contain float children and has a normal height

Answer 4

The issue you're encountering where content below the navbar displays inline rather than as a block element is likely due to the fact that you're floating the list items within the .header element. When you float elements, they are taken out of the normal document flow, which can affect how other elements are positioned relative to them.

Currently, you're clearing the float only for the .header .menu class, but you need to clear the float for the entire header.

You can achieve this by adding a clearfix to the .header class.

  .header {
    width: 100%;
    z-index: 3;
    overflow: auto;
  }