Hello people, I am actually fairly new to mdb, bootstrap CSS, etc. in general. I just started making this website just to learn how it actually works. The website works fine except when I put elements inside the header tag. I don't know what the actual problem is when I try to inspect the elements the height value of the elements inside the header is 0 but when I get rid of the header tag everything seems to work fine. here is my code;

<header>
  <div class="view">
    <div class="mask rgba-stylish-light align-items-center">
      <div id=cover class="container-fluid px-sm-5 py-sm-3 ">
        <div class="row d-flex justify-content-start">
          <img id=logo src="Images\logo.png" alt="John Doe" class="img-fluid " style="max-width: 50%;">
        </div>
        <div class="row align-items-center h-75">
        <div id='col1'class="col-sm-6">
          <div class="pr-0 mx-auto">
            <h1 id="title" class="animated fadeInUp">text text text</h1>
            <hr id=hori-rule>
            <h4 id='sub-title'class="animated fadeInUp delay-1s">MORE TEXT HERE</h4>
          </div>
        </div>
        <div id='col2'class="col-sm-6">
          <div id='card' class="card border-0 rounded py-sm-4 text-white animated slideInRight">
            <div class="card-header py-sm-0">
              <div id="demo" class="carousel slide " data-ride="carousel">
                <!-- Indicators -->
                <ul class="carousel-indicators">
                  <li data-target="#demo" data-slide-to="0" class="active"></li>
                  <li data-target="#demo" data-slide-to="1"></li>
                  <li data-target="#demo" data-slide-to="2"></li>
                </ul>
                <!-- The slideshow -->
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img class="img-fluid" src="Images\LotusImage01.jpg" alt="Lotus Peyzaj">
                  </div>
                  <div class="carousel-item">
                    <img class="img-fluid" src="Images\LotusImage02.jpg" alt="Lotus Peyzaj">
                  </div>
                  <div class="carousel-item">
                    <img class="img-fluid" src="Images\LotusImage03.jpg" alt="Lotus Peyzaj">
                  </div>
                </div>
                <!-- Left and right controls -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                  <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                  <span class="carousel-control-next-icon"></span>
                </a>
              </div>
            </div>
            <div class="card-body py-sm-0">
              <h2 id=cardtitle class="card-title mt-sm-2 mb-0">About Us</h2>
              <hr id=card-h-rule class="mx-auto pt-0">
              <h3 id=cardtext class="card-text">BUNCH OF TEXT </h3>
            </div>
          </div>
        </div>
      </div>
   </div>
 </div>
</div>