.bottom-nav {
background-color: #444;
width: 100%;
}
a {
display: inline-block;
padding: 10px 15px;
font-size: 1.3em;
color: inherit;
text-decoration: none;
background: #444;
color: white;
float: left;
}
a:hover {
color: black;
background-color: green;
transition: 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content">
<h2>Resp bottom nav bar</h2>
<p> Resize the brovser to see how its work</p>
</div>
<div class="bottom-nav">
<a href="">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
</div>
<script src="script.js"></script>
</body>
</html>
никак не пойму что делает такого pos:fixed что bottom-nav без нее не растягивается на всю ширину
body