How to stop header from hiding under navbar and aligning question?

HTML-CSS
#1

Hi guys, I’m finishing up my first Boostrap project but I noticed that my header is hiding under my navbar. How can I fix this and still keep my fixed navbar? Also, I’m trying to figure out how to align my text to the left of the flowers in my header. Any ideas on how it can be done?

link to site: https://mimis-flowers.netlify.app/

<nav class="navbar navbar-expand-lg fixed-top bg-white">

        <!-- Navbar brand -->
        <a id="logo" class="navbar-brand" href="#">MiMi's Flowers</a>

        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
            aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
            <span><i class="fas fa-bars"></i></span>
        </button>

        <!-- Collapsible content -->
        <div class="collapse navbar-collapse text-dark" id="basicExampleNav">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#gallery">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#occassion">Occassion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
            <!-- Links -->

            <form class="form-inline mx-5">
                <input id="search-bar" class="form-control mr-sm-2" type="text" placeholder="Search"
                    aria-label="Search">
                <button class="btn btn-outline-scondary my-2 my-sm-0" type="submit">Search</button>

            </form>
        </div>
        <!-- Collapsible content -->
    </nav>
    <header id="header">
        <div class="container">
            <div class="row height align-items-center">
                <div class="col">
                    <h1 class="text-danger text-uppercase font-weight-bold font-italic"><strong>Give </strong>
                        <small class="text-light">website</small>
                    </h1>
                    <p class="text-muted lead py-2 w-75">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Repellendus quae facilis rem vel. Perferendis commodi eum magni distinctio deleniti nulla.</p>
                    <button type="submit" class="btn btn-light btn-lg">Submit</button>
                </div>
            </div>
        </div>
    </header>

body,html,header,#header{
    width: 100%;
  height: 100%;
}

#logo{
    font-size: 30px;
    font-family: 'Courgette', cursive;
}

a{
    color: black !important;
}

#github-logo{
    color: black;
    font-size: 50px;
}

.height-80{
    min-height: 80vh;
}

.title-underline{
    width: 200px;
    height: 5px;
    margin: 0 auto;
    }

nav{
    margin-bottom: 50px !important;
}

#header{
    background:url("/images/header-img6.jpg") center/cover no-repeat;
}


.about-picture{
    background:url("/images/about-img.jpg") center/cover no-repeat;
}

.about-para{
    text-indent: 20px;
    font-size: 20px;
}

#order-button{
    background-color: #990000; 
}

#gallery,#contact{
    background-color: #DCDCDC;
}

.occassion-picture{
    background: url("/images/occassion-img.jpg") center/cover no-repeat;
}

form{
    margin: 0 auto;
}

#button-container{
     margin: 0 auto;
     text-align: center;
 }```
#2

items with a fixed position are taken out of normal flow of the HTML, and therefore you must account for the space they take up. You can try using margin-top in your header with value equal to the height of your nav (assuming your nav is on top)

I can’t really see how your website looks with the snippet you’ve given. But generally, you can put text to the right/left of images by using float see examples from MDN here.
Or you have a wrapper with the image and the text in it, make the wrapper a flexbox with flex-direction:row

#3

Sorry, I forgot to include the link in the original post. I updated the post with the link.

#4

For the text aligning, you could assume the flowers always takes up around 50% of the right side of your header, and therefore:

.container {
position:relative;
width:30%;
left:10%;
#5

Thank you, I think I was able to figure it out.