Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="all" href="style.css">
        <link rel="stylesheet" type="text/css" href="flexbox.css">
        <title>Flexbox</title>
    </head>
    <body>
     <h1>Flexbox</h1>

        <ul class="nav">
            <li><a href="#">Pradžia</a></li>
            <li><a href="#">Apie</a></li>
            <li><a href="#">Prekės</a></li>
            <li><a href="#">Paslaugos</a></li>
            <li><a href="#">Kontaktai</a></li>
        </ul>


    </body>
</html>

/*---------------------------------------------style.css-------------------------------------

* {
	box-sizing: border-box;
}
body {
    font-size: 1.3em;
    font-family: 'Nunito', sans-serif;
    color: #fff;
    background-color: #e8e9e9;
    padding-left: 5%;
    padding-right: 5%;
}

h1{
	color: #555;
}

.nav {
  list-style: none;
  margin: 0;
  background: #8eacb6;
  }

.nav a {
  text-decoration: none;
  display: block;
  padding: 10em;
  color: white;
}

.nav a:hover {
  background: #bcced4;
  color: black;
}


  .nav a {
    text-align: center;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(0,0,0,0.1);
   }


  .nav li:last-of-type a {
    border-bottom: none;
  }
/*-------------------------flexbox.css------------------------------------------------

.nav {
   display: flex;
   flex-flow: row wrap;
 /* justify-content: flex-end;*/

}


@media all and (max-width: 800px) {
  .nav {
    justify-content: space-between;

  }
}

@media all and (max-width: 575px) {
  .nav {
    flex-flow: column wrap;
    padding: 0;
  }
}