Edit in JSFiddle

<div class="nav">
    <a href="#">Главная</a>
	<a href="#">О нас</a>
	<a href="#">Продукты</a>
	<a href="#">Контакты</a>
</div>
body{ font-family:arial; }

.nav {
	display: flex;
	justify-content: flex-end; /* разместим справа */
  
	background: #6e9cc3;
}

.nav a {
	color:#fff;
	padding:15px 10px;
	text-decoration:none;
	text-align:center;
}
.nav a:hover { background:#5c8db7; }

/* меньше 800px */
@media all and (max-width: 800px) {
	.nav { justify-content: space-around; }
	.nav a{ flex-grow:1; /* растягиваться на всю ширину */ }
}

/* меньше 500px */
@media all and (max-width: 500px) {
	.nav { flex-direction: column; }
}