How to get my nav/menu bar's width to span the entire page

Question

The HTML

<title>
    menubar
    </title>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
    <nav>
        <ul>
            <li>
                <a href="#">Home                                  </a>
            </li>
            <li>
                <a href="#">About Us                                 </a>
                <ul>
                    <li>
                        <a href="#">What we do</a>
                    </li>
                    <li>
                        <a href="#">Members and Alumni</a>
                    </li>
                    <li>
                        <a href="http://www.katyisd.org/campus/crhs/Pages/default.aspx" target="_blank">Cinco Ranch High School</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Events                                 </a>
            </li>
            <li>
                <a href="#">Photo Gallery                                 </a>
            </li>
            <li>
                <a href="#">Contact Us                                 </a>
            </li>
        </ul>
    </nav>
</head>
<body></body>

The CSS

@font-face {
    font-family: NASA;
    src: url("nasalization rg.ttf");
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;

    }

nav {
  width:1080px;
  margin:0 auto;
  list-style:none;

}

nav ul {
    background: #8D8D8D; 
    background: linear-gradient(top, #8D8D8D 0%, #383838 100%);  
    background: -moz-linear-gradient(top, #8D8D8D 0%, #383838 100%); 
    background: -webkit-linear-gradient(top, #8D8D8D 0%,#383838 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0px auto 0px auto;
    border-radius: 5.5px;  
    list-style: none;
    position: relative;
    display: inline-table;
  font-family: NASA;
  font-weight: bold;
  font-size: 20px;
  width 100%;
  margin-top: 0px
}

    nav ul:after {
        content: ""; clear: both; display: block;
    }

  nav ul li {
    float: left;
  padding-right: 20px
}
    nav ul li:hover {
        background:#777777;
        background: linear-gradient(top, #777777 0%, #6B6B6B 40%);
        background: -moz-linear-gradient(top, #777777 0%, #6B6B6B 40%);
        background: -webkit-linear-gradient(top, #777777 0%,#6B6B6B 40%);
    }
        nav ul li:hover a {
            color: #2E2E2E;
        }

    nav ul li a {
        display: block; 
    padding: 25px 40px;
        color: #151515; 
    text-decoration: none;
    }

  nav ul ul {
    background: #6B6B6B; border-radius: 10px; padding: 0;
    position: absolute; top-center: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #000000;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 40px;
            color:#2E2E2E;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

Above ive included the HTML and CSS for my nav bar ive been trying to figure out how to get it to span the entire length of the page with the content centered in the middle like this: http://www.cssnewbie.com/full-width-centered-navigation-bar/#.VY8G7PlVhBc. If someone could help me that would be great Thank You in advance BY THE WAY I KNOW MY HTML DOES NOT HAVE THE TAGS ON IT I WILL FIX THAT LATER

Possible duplicate - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Jun 27 '15 at 20:31
Nav ul { width } is missing a semi colon : it should be width: ; — Spade, Jun 27 '15 at 20:33

score 0 · Answer 1 · answered Jun 27 '15 at 20:33

0

Give your nav a width of 100%; and then set a width of 1080px on nav ul, plus margin: 0 auto;.

answered Jun 27 '15 at 20:33

Flobin

626
1
10
26

How to get my nav/menu bar's width to span the entire page

1 Answers1