PROBLEM ::: .navbar >:nth-child(3){margin:auto; } hover is not working in the media quires. Is there any other solution for this code?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing: border-box;}
.navbar {
display: flex;
background-color: #333; }
.navbar > :nth-child(3){
margin-right: auto;
}
.navbar a{
color: white;
text-align: center;
text-decoration: none;
padding: 14px 20px;
}
.navbar a:hover {
background-color: #A4A1A1;
}
@media screen and (max-width:700px){
.navbar {
flex-direction: column;
}
.navbar >:nth-child(3){
margin:auto;
}
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing: border-box;}
.navbar {
display: flex;
background-color: #333;
}
.navbar > :nth-child(3){
margin-right: auto;
}
.navbar a{
color: white;
text-align: center;
text-decoration: none;
padding: 14px 20px;
}
.navbar a:hover {
background-color: #A4A1A1;
}
@media screen and (max-width:700px){
.navbar {
flex-direction: column;
}
.navbar >:nth-child(3){
margin:auto;
}
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
</html>
