Tea Cozy project: z-index not functioning

Hi everyone,

This is my first question on the forum. Hopefully, I have done everything correctly.

I completed the Tea Cozy project, except my z-index for the header is not working. My objective is to apply a z-index of 1 to the header so text & images don’t overlap as I scroll through the page. Code suggestions are much appreciated.

Relevant code

        <div class="header-container">
            <div class="logo">
                <img src="./Resources/Images/img-tea-cozy-logo.png">
                    <li><a href="#">Mission</a></li>
                    <li><a href="#">Featured</a></li>
                    <li><a href="#">Tea</a></li>
                    <li><a href="#">Locations</a></li>
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;

display: flex;
border-bottom: 1px solid seashell;
margin: 0px 10px;
justify-content: space-between;

.logo {
    margin-left: 10px;
    height: 50px;

 nav li{
    display: inline-block;
    text-decoration: underline;
    padding-left: 15px;   
    margin-right: 20px;

nav a{

nav a:hover{
   color: yellow; 

Scrolled text and image currently incorrectly appears behind the header.

Project link:

Hi, there!

Welcome to the forums!

Have you fixed your issue? If not, have you looked at adding a background color to your header?

Hi Kirativewd,

I didn’t fix the issue until I read your response. It works perfectly now. Thank you for providing a solution.


1 Like