Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
            .menu-item{display: inline-block;margin: auto;}
            .menu-href{margin: 30px;padding: 10px;color: blueviolet;border: 1px solid blue;border-radius: 10px;background: aquamarine;}
           .menu{display: inline-block;padding: 5px; margin-left: 10px;background-color:rgba(209,46,202,0.4);vertical-align:top;border-radius: 20px ;margin: 10px;}
           .photo{height: 100px;width: 100px;background-color:gray;margin:auto;vertical-align: top;border-radius: 50% ;}
           .art1{background-color:#47AAFF; width: 80%;margin: auto;padding: 20px;border: 10px inset indigo;margin-top:30px; }
           .art2{width: 80%;background: rgb(98, 191, 158);margin: auto;padding: 20px;border: 10px inset indigo;margin-top:30px;}
           h1,h2{text-align: center;}
           a{text-decoration: none;height:100%;width: auto; }
           .film1{background: url(https://f.otzyv.ru/f/kino/2013/3952/otzyv.ru-0908110510_1080.jpg) 50%/cover;}
           .film2{background: url(https://f.otzyv.ru/f/kino/2017/5474/0306171403570.jpg) 50%/cover;}
           .film3{background: url(http://gmtrailers.ru/imdb/stills/157832movie2.jpg) 50%/cover;}
           .film4{background: url(https://cdn.shazoo.ru/177537_nNloDSbNuh_lbn.jpg) 50%/cover;}
           .my-favorite{display: inline-block;width: 300px;height: 180px;background-color: gray; }
           nav{position:sticky; top:20px;}
           .test{position: relative;}
    </style>
    <title>Document</title>
</head>

<body>

        <nav>
                <ul>
                <li class="menu-item"><a class="menu-href" href="#first">Главная</a></li>
                <li class="menu-item"><a class="menu-href" href="#second">Продукция</a></li>
                <li class="menu-item"><a class="menu-href" href="#third">О нас</a></li>
                <li class="menu-item"><a class="menu-href" href="#fourth">Контакты</a></li>
                </ul>
        </nav>


</body>

</html>