Can't remove whitespace from underneath Navigation bar

Question

so on my test page I'm having this issue with the navigation bar. There's whitespace that appears underneath and it is being caused by a hidden button and drop down menu.

In full desktop view, top right you will see Select Province/Ontario and Francais, when the website goes into mobile view, I hide those two, and then in the Navigation bar, i have two buttons and a drop down menu appear.

I have tried using visbility: hidden and currently using display: none;, and have tried using both together, but no luck.

It's weird, if I shrink the screen down it only looks like there's one hidden li after maximizing.

BUT if you shrink down and open the toggle menu, and then maximize without closing it, it'll show you the two extra whitespace underneath it. If i removed the Francais and Province sections it would work perfect, but unfortunately i need them lol.

Here is the html:

<nav>
  <div>
   <ul class="nav navbar-nav">
    <li class="left"><a href="http://convio.cancer.ca/site/TR?fr_id=[[S80:trID]]" class="home-btn" title="Home">Home</a></li>
    <li class="left"><a href="TR/Events?pg=informational&amp;type=fr_informational&amp;sid=9700&amp;fr_id=[[S80:trID]]" class="tours-btn" title="Register">Register</a></li>
    <li class="left"><a href="TR/Events?pg=pfind&amp;fr_id=[[S80:trID]]" class="about-btn" title="Search participants or teams">Find a Fundraiser</a></li>
    <li class="left"><a href="TR/Events/General?pg=informational&fr_id=21282&type=fr_informational&sid=6583" class="learn-btn" title="Learn more">Learn More</a></li>
    <li class="right"><a href="TR/Events?pg=pfind&amp;fr_id=[[S80:trID]]" class="donater-btn hvr-buzz-out" title="Donate to team or participant">DONATE</a></li>

   <li class="dropdown">
     <a class="dropdown-toggle provinces-btn" data-toggle="dropdown">Select Province<span class="caret"></span></a> 
    <ul class="dropdown-menu">
         <li><a href="#">Alberta</a></li>
         <li><a href="#">British Columbia</a></li>
         <li><a href="#">Ontario</a></li>
         <li><a href="#">Nunavut</a></li>
         <li><a href="#">Manitoba</a></li>
    </ul>  
   </li>

   <li class="right"><a href="frenchurl" class="french-btn" title="French">Français</a></li>

  </ul>
 </div>
</nav>

Here is the css for those two extra <li>:

/*Mobile provinces Selector*/
@media screen and (min-width: 769px){
 .provinces-btn{
  display: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 }
}

@media screen and (max-width: 768px) {
.provinces-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 0px;


}

    .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

}

@media screen and (max-width: 604px) {
.provinces-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 15px;

   }

       .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

 }



/*French BTN*/
@media screen and (min-width: 769px){
 .french-btn{
  display: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 }
}

@media screen and (max-width: 768px) {
.french-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 0px;


}

    .french-btn:hover, .french-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

}

@media screen and (max-width: 604px) {
.french-btn {

    width: 100%;
    margin-top: 16px;
    color: #FFFFFF !important;
    background-color: #0066CC;
    margin-left: 15px;

   }

       .french-btn:hover, .french-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

 }

thank you for your time!

Answer 1

The issue is occurring because the parent container does not have position: relative and so the child containers are using the full width of the page rather than being contained and behaved. To help you understand what's going on I made this JSFiddle one with relative on the container, one without it.

#logo-login-container {
    height: 135px;
    margin: 0 auto;
    max-width: 970px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    position: relative;
}


.styled-select {
    background: rgba(0, 0, 0, 0) url("http://convio.cancer.ca/mResponsive/images/icons/dropdown_blue_icon.png") no-repeat scroll right center;
    border: 1px solid #e9e9e9;
    height: 35px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 100px;
    width: 185px;
}

Your need to change Français position to right: 210px; as this is set outside of the CSS stylesheet. Also in future I recommend that you research css floats as they are much easier to manage.

Answer 2

Just remove them with display: none !important to overwrite the display: block