Navbar not expanding to the full width of the screen
Well hello there, can anyone please tell me how to fix the nav bar?
HTML code for Projects.
CSS:
HTML code for Projects.
<!doctype html>
<html>
<head>
<title>Web</title>
<link rel = "stylesheet" href = "style.css" />
</head>
<body>
<navbar>
<a href="index.html" class = "nav-link">Home</a></li>
<a href="Projects.html" class = "nav-link">Projects</a></li>
</navbar>
<a href="https://heyzine.com/flip-book/a99b96b4bd.html" target="_BLANK" class="heyzine-link">
<img
src="https://cdnc.heyzine.com/flip-book/cover/a99b96b4bd.jpg" class="book-image" />
</a>
</body>
</html><!doctype html>
<html>
<head>
<title>Web</title>
<link rel = "stylesheet" href = "style.css" />
</head>
<body>
<navbar>
<a href="index.html" class = "nav-link">Home</a></li>
<a href="Projects.html" class = "nav-link">Projects</a></li>
</navbar>
<a href="https://heyzine.com/flip-book/a99b96b4bd.html" target="_BLANK" class="heyzine-link">
<img
src="https://cdnc.heyzine.com/flip-book/cover/a99b96b4bd.jpg" class="book-image" />
</a>
</body>
</html>CSS:
* {
box-sizeing: border-box;
}
body {
background-color: rgba(63, 189, 191, 0.3);
}
html,body {
margin: 0px;
padding: 0px;
}
navbar {
display: flex;
flex-direction: row;
justify-content: center;
background-color: orange;
}
.nav-link {
text-align: center;
padding: 20px;
text-decoration: none;
}
.nav-link:hover {
background-color: grey;
}
.book-image {
border: 1px solid lightgray; box-shadow: lightgray 0px 0px 4px 1px;
width: 65%;
height: 65%;
margin-left: 20%;
margin-right: 20%;
margin-top: 20%;
}
.heyzine-link {
display: block;
}* {
box-sizeing: border-box;
}
body {
background-color: rgba(63, 189, 191, 0.3);
}
html,body {
margin: 0px;
padding: 0px;
}
navbar {
display: flex;
flex-direction: row;
justify-content: center;
background-color: orange;
}
.nav-link {
text-align: center;
padding: 20px;
text-decoration: none;
}
.nav-link:hover {
background-color: grey;
}
.book-image {
border: 1px solid lightgray; box-shadow: lightgray 0px 0px 4px 1px;
width: 65%;
height: 65%;
margin-left: 20%;
margin-right: 20%;
margin-top: 20%;
}
.heyzine-link {
display: block;
}
