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.

<!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;

}

5 Replies

Jochem•2y ago

it's easier to diagnose something like this if you include a codepen so we can see the live code... but just off the top of my head: <navbar> isn't an HTML element, and you've got dangling closing tags for non-existent <li> tags The issue is though that you've got side margins that add up to 40% and a width of 65% on the .book-image class

MarkBoots•2y ago

i was typing to slow. What Jochem said ☝️

Jochem•2y ago

so that section tries to be 105% width, which is causing scrolling and making it look like the 100% width navbar isn't wide enough

Curious Wanderer•2y ago

Removed the margins and it worked but I also want it to be on the center

Jochem•2y ago

you can have the margins, but width+left+right needs to add up to 100% alternatively, you should be able to set the side margins to both be auto or use display:flex; on the parent to center the contents

Gaming

Programming

Navbar not expanding to the full width of the screen