I have been working on creating a responsive webpage. While the header and footer are resizing properly when the browser is reduced in size, the navigation section is not behaving the same way. Currently, shrinking the page is causing the navigation block to split into two rows.
My goal is to have the navigation block resize similar to the header and footer. How can I achieve this?
<!DOCTYPE html>
<html>
<head>
<title> Responsive Design </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
@media screen and (max-width:959px) {
div.container {
width: 100%;
}
article {
margin-top: 20px;
margin-left: 0px;
}
.div1 {
height: 15px;
background-color: red;
font-size: 30px;
padding: 15px 10px;
font-weight: bold;
}
nav {
max-width: 600px;
margin-left: 40px;
overflow: hidden;
margin: 0;
margin-top: -50px;
}
nav ul {
text-align: center;
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
float: left;
display: inline-block;
}
nav ul a {
*display: block;
text-align: center;
text-decoration: none;
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class = "div1">
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
</div>
<div class = "div2">
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area of over
13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its founding by
the Romans, who named it Londinium.</p>
</article>
</div>
<footer>Copyright © W3Schools.com</footer>
</div>
</body>
</html>