Fixed navigation extra space issue

Question

        .bg {
        opacity:100%;
        margin-right:auto;
        margin-left:auto;
        background-image:url(../Images/navbg.png);
        background-size:84.5em 6em;
        background-position:center;
        background-repeat:no-repeat;
        width:84.5em;
        height:2.6875em;
        z-index:500;        
}

.fixed {
      position:fixed;
      top:0;
      left:0;
      z-index: 20;
    }
    @media (max-width:1219px){
        .fixed{
            position:absolute;
            width:84.5em;
            top:0;
            left:0;
            margin: 0em 0px 0px 0em;
        }   
    }






    ul {
      height: 1.25em;
      width: 68em;
       font-family:Verdana, Geneva, sans-serif;
      position:relative;
    }

    li {
      float: left; 
      list-style: none;
      margin: 0em 0em;
      text-transform: uppercase;
      letter-spacing: .25em;
      color: #000;
      font-family:Verdana, Geneva, sans-serif;
        border-top-left-radius: 1em 1em;/*Rounded Corners*/
        border-bottom-left-radius: 1em 1em;/*Rounded Corners*/
        border-top-right-radius: 1em 1em;/*Rounded Corners*/
        border-bottom-right-radius: 1em 1em;/*Rounded Corners*/

    }
    @media (max-width:1219px) {
        li {
        width:auto;
        height:1.45em;
        line-height:1.5em; 
        padding:0px;
        }
    }



    #nav{
 margin: -2.45em auto 0px 9.5em;

    }

    #nav a{
      text-decoration: none;
      letter-spacing:1px;
      text-shadow: 1px 1px 1px rgba(102,102,102,.0);
      font-family:Verdana, Geneva, sans-serif;
      color:#525252;
      font-size:.77em;
      position:relative;
      display:block;
      line-height:2em;

    }
    @media (max-width:1219px) {
        #nav a{
          text-decoration: none;
      letter-spacing:1px;
      text-shadow: 1px 1px 1px rgba(102,102,102,.0);
      font-family:Verdana, Geneva, sans-serif;
      color:#525252;
      font-size:11px;
      position:relative;
      display:block;
      line-height:2em;



        }
    }

    #nav a:hover{
    color: #fff;
    text-shadow: -2px 2px 2px #C9C9C9;
    font-size:.77em;
    position:relative;

    }
    @media (max-width:1219px) {
        #nav a:hover{
        color: #fff;
        text-shadow: -2px 2px 2px #C9C9C9;
        font-size:11px;
        position:relative;
        }
    }

    .blockhover{
        border-top-left-radius: 0em 0em;/*Rounded Corners*/
        border-bottom-left-radius: 0em 0em;/*Rounded Corners*/
        border-top-right-radius: 0em 0em;/*Rounded Corners*/
        border-bottom-right-radius: 0em 0em;/*Rounded Corners*/
    }
    ul.drop a { 
    color: #fff; 
    font-family: Verdana; 
    font-size: .875em; 
    text-decoration: none;
    position:relative;

    }

    ul.drop, ul.drop li, ul.drop ul {
    list-style: none; 
    margin: 0; 
    padding: 0; 
    color: #fff;
    position:relative;

    }

    ul.drop { 
    position: relative; 
    z-index: 597; 
    float: left; 

    }

    ul.drop li { 
    float: left; 
    line-height: 1.3em; 
    vertical-align: middle; 
    zoom: 1; 
    padding: .3125em .625em; 

    }
     ul.drop li:hover{

         position: relative; 
    z-index: 599; 
    cursor: default; 
    background: #CDBF85; 
    color:#fff;
     }
    ul.drop li.hover, { 
    position: relative; 
    z-index: 599; 
    cursor: default; 
    background: #C5B369; 
    color:#fff;

    }
    /*dropdown background*/
    ul.drop ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 12.1875em; 
    background:#D3D3D3;
    height:auto;


    }

    ul.drop ul li { 
    float: none; 
    }

    ul.drop ul ul { 
    top: -.125em; 
    left: 100%; 
    }

    ul.drop li:hover > ul { 
    visibility: visible;

     }


    ul.drop li.hover {
        -webkit-transition: all .75s ease-in;
        -moz-transition: all .75s ease-in;
        -ms-transition: all .75s ease-in;
        -o-transition: all .75s ease-in;
        transition: all .75s ease-in;

    }ul.drop li.hover:active {
        background: #BCBA72;
    }

Me and a few others are redesigning our high school web page, as it desperately needs it! There is a weird margin issue of some sort that is making a blank gap to the right of the page. We cannot figure out what the cause is to save our lives. We are trying to implement a fixed navigation and we think that is what's causing it, but we just don't know where in the code.

Here is our most current version we have live, if anyone is willing to validate our syntax or explain an easier way to achieve a more fluid fixed navigation, it would mean a lot!


    

  
     Home
     Academics
    
        A+
        API
        Community Service
        IB at LSHS
        Programs of Study
        Summer School
      
      


     Clubs/Activities

     Sports



        Calendars
        All School Calendar
            Athletic Calendar
            District Calendar
            LSHS.PDF
            Tutoring Calendar
      
      

         Counseling
        Counseling Center
            Program of Study
            Transcripts
      
      

         Media Center

      Parents/Alumni
        Alumni
            Booster Clubs
            Building Emails
            Hall of Fame
            Nutrition Services
            PTSA/Project Grad
            Student Handbook
            Transcripts
      
          

      Staff
        Alphabetical Listing
            Staff by Department
      
      


      Student Life
        Art Gallery
            Bell Schedule
            Courtwarming 2012
            District Handbook
            Fall Assembly 2012
            FAQ
            Finals Schedule
            Foreign Exchange
            Homecoming 2012
            Junior Information
            Recource Officer
            Senior Information
            Student of the Month
            Student Planner

Joshua Pack · Accepted Answer

It is actually do to a margin-left is set in the fluidtiger.css You also have width set to 100% and margin is outside, so any margin will add width to your block.

Just want to add this nice little page for reference about the box model if anyone else sees this page. http://www.w3.org/TR/CSS2/box.html

Fixed navigation extra space issue

Answers (2)

Related Questions