How can I make a nav bar stretch the entire width of the browser (every size browser, even when zoomed in or out) without getting a horizontal scroll bar?
The url to my site is I have a nav bar that I want to be stretched to fill the entire width of the browser, no matter what the size of the screen. How can I do that without getting a horizontal scrollbar at the bottom?

I managed to make it stretch on the right side, by adding padding, and then


overflow-x:hidden; to the body.
But how can I make the left side stretch? Adding padding would just push over all the tabs.
Url is

Is something like this?

.my-nav-bar {
    width: 100%; /* the parent must have 100% either */
    overflow: hidden; /* hides overflow */

Wrap your nav div in a wrapper div. Set the wrapper div width:100% set the nav div to the width of the page content than margin:0 auto; :

  background-color: #FFF; //Change this to the background color of your nav bar

  width: 800px; //Change this to the actual width of the page content
  margin: 0 auto;

<div class="nav_wrapper">
  <div class="nav_bar">
    <ul id="nav_menu">
      <li class="page_item page-item-120 current_page_item"><a href="">Home</a></li>
      <li class="page_item page-item-41"><a href="">FAQ&#8217;s</a></li>
      <li class="page_item page-item-39"><a href="">Our Products</a></li>
      <li class="page_item page-item-43"><a href="">Testimonials</a></li>
      <li class="page_item page-item-70"><a href="">In The News</a></li>
      <li class="page_item page-item-45"><a href="">Contact Us</a></li>


Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.