How can I make my navbar span the whole viewport?

This is a personal project I’m working on. I mostly just want to practice html and css but I’d also like to build a simple website for myself.

I’m trying to keep the design and layout simple. I don’t have that many issues with spacing and aligning text or images just yet. But I’m having a hard time figuring out how to make the navbar span the whole view-port.

As you can see, I set the body element’s css properties so that everything in the body element is aligned to the center. I put the nav element outside the body element (I tucked it in the head element, but it’s left margins align with the body element).

Here is my HTML and CSS

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
<nav id="navbar" class="topnav"> 
     <a href="">About</a>
      <a href="">Projects</a>
      <a href="">Blog</a>
      <a href="">Contact</a>

   <h1>Welcome to my Website</h1>
    <div id="container">
      <img src="file:///Users/nersesarslanian/Downloads/reading.jpg">

      <h2>About Me</h2>
      <p>Hi there, my name is Nerses. I like reading by the fireside. 

      <img src="file:///Users/nersesarslanian/Downloads/LudWitt.jpg"> 
      <p>This is Ludwig Wittgenstein. He is my favorite philosopher</p>


nav {
	width: 100vw;
	height: 20%;
	background-color: #0a0a23;
a {
	color: linen;
	text-decoration: none;
	cursor: pointer;

body {
	margin: auto;
	padding: 20px;
	width:  640px;

img {
	object-fit: cover;
	height: 90%;
	width: 90%;

Why don’t you have a closing p tag here

<p>Hi there, my name is Nerses. I like reading by the fireside. 

The <head> element is a container for metadata and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, styles, scripts, and other meta information.
The <body> element contains all the contents of an HTML document
And the <body> tag has default margin of 8px, if do you want your nav has a full width of the page you can select the body element and set it margin to 0, padding to 0 also (at your code you set the padding to 20px), and delete the width property, change it to max-width and set it value to 100% . And put you<nav> element inside the <body> element. And maybe this is true and work

Didn’t notice the omission. Thanks!

It worked! Thanks for the help : )

You’re welcome, , , , , , , , , , , , ’ ’ ’ ’ ’ ’ ’ ’ ’ ’ ’ ’ ’ ’ , , , , , , , , , , , , , , , ’ ’ ’ ’ ’ ’ ’ ’ ’ ’ ’ ’ ’ ’

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.