HTML - Horizotnal Menu Navigation

I am trying to practise building my own ecommerce web page but already having problems with the header. I would like the menu navigation to stretch across the entire page. When i just have the header title, it is fine but as soon as i add the horizontal menu, it doesn’t stretch across the page. My HTML and CSS is very basic so far. What have i done wrong or what do i need to add to make the header stretch across 100%?

<!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">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="Jaysee.css">
    <header class="header">
    <h1 class="header_title">JAYSEE</h1>
     <div class="nav">
            <li class="shop"><a href="#">SHOP</a></li>
            <li class="about"><a href="#">ABOUT</a></li>
            <li class="contact"><a href="#">CONTACT</a></li>
.header {
    position: fixed;

.header_title {
    text-align: center;

li {
    display: inline;

#nav {
    width: 100%;

Try giving your li

display: inline-block or block.

Thanks, just tried this but no luck!

try making more than one

or you can use javascript

Since you have made your .header as fixed, you should apply width of 100% to it, so that it’ll stretch the screen and there is no id as #nav in your html, check that, also remove the inline which you have given to li

1 Like

First issue is you used the wrong css selector for your nav class. Go ahead and change that. 2nd, take a look at where your nav tag is in relation to the header tag in your html.

Take a look at this link illustrating your container sizes. When in doubt, add some obvious style elements like background color, or borders to trouble shoot your problems. Always helps me!

Hopefully I explained this well and it helps. let me know if you have more questions about it!

Edit: I would honestly recommend using CSS like i did as you build the styling, regardless of if you have any issues. Using background-color and such as you go helps illustrate the changes you are making, container sizes, and so on. It helps build a grasp of how CSS affects you website.

1 Like