Media Queries

<DOCTYPE html>
<html>
<head>
<style>
header{
    text-align: center;
    display: block;
    background: green;
    font-size: 20px;
}
nav{
}
nav ul{
    background: blue;
    height: 18px;
}
nav li{
    display: inline-block;
    width:30%;
    text-align: center;
    color: white;
}
nav li:hover{
    background: orange;
}
section{
    background: lightblue;
}
img{
    width:33%;
}

@media screen and (max-width:900px){
    body{
        background: orange;
    }
    header{
        font-size: smaller;
    }
    img{
        width: 45%;
    }
}

@media screen and (max-width:800px){
    body{
        background: black;
    }
    header{
        font-size: smaller;
    }
    img{
        width: 100%;
    }
    nav li{
        width: 45%;
        display: inline-block;
    }
    nav ul{
        height: 36px;
    }
}
</style>
</head>
<body>
    <header>
        <h1>Image</h1>
    </header>
    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contanct</li>
        </ul>
    </nav>
    <section>
        <p>Have a look at these amazing images of 3 birds.</p>
        <span><img src="b.png" /><span>
        <span><img src="b.png" /><span>
        <span><img src="b.png" /><span>
    </section>
</body>
</html>