Confusion in margin in media query

1 
<html>
    <header id="header">


        <div class="logo">
            <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="trombone Logo">
        </div>

        

        <nav id="nav-bar">
            <ul>
                <li><a href="#">Features</a></li>
                <li><a href="#">How it works</a></li>
                <li><a href="#">Pricing</a></li>
            </ul>
        </nav>
        
   
    </header>

<style>

ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}

#header{
    display: flex;
    justify-content: space-between;

}

.logo{
    display: flex;
    justify-content:  center;
    align-items: center;
    
}
#nav-bar{
    width: 100%;
    margin-left: 20%;
}

img{
    max-width: 300px;
}

ul{
    display: flex;
    justify-content:  space-around;
}

@media (max-width: 700px)
{
    header{
        flex-direction: column;
    }
    ul{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    nav{
        margin-left: 0px;
    }
}
</style>
</html>

I don’t know why the last line of code ( in media query section --> margin-left : 0px; )not working .
Please help me to figure out why the media is not able to overwrite the code.

2

You are originally styling the nav bar using the id (#nav-bar). In the media query you are only using ‘nav’. The styling using the id will take precedence over just using the element. Use the same selector for both.

1 Like
3

Oh wow ! that’s worked … Thank you sooooo much .

Is it necessary to use same selector in normal css and in media query . Why is it not working with different selectors :thinking:

4

I’d read up on CSS specificity:

Once you understand how the browser chooses which rule to implement you should be able to answer your own questions :slight_smile:

1 Like
5

Thank you so much again :slight_smile: