html - Making a responsive bootstrap nav (problems with alignment) -

i've created nav using bootstrap it's not responding way i'd to. want align first image in photo menu (opens when click camera icon), want align @ screen sizes. i've tried playing around margins i'm not sure if best way, didn't scale down nicely.

website: http://explorecanterbury.co.uk/#

thanks

you have .container wrapping .container-fluid. defeats purpose of fluid container. remove innermost fluid container , replace outermost container fluid container. can see difference in 2 snippets below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">  <!-- ↓ should container-fluid ↓ -->  <div class="container">    <nav class="navbar navbar-default" style="z-index:2;">      <!-- ↓ shouldn't here @ ↓ -->      <div class="container-fluid" style="padding-left: 5px;">        <!-- brand , toggle grouped better mobile display -->        <div class="navbar-header">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">            <span class="sr-only">toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>        </div>          <!-- collect nav links, forms, , other content toggling -->        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">          <ul class="nav navbar-nav">            <li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="locicon"></span></li>            <ul class="dropdown-menu">              <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox">&nbsp;museums , galleries</a></li>              <li><a href="#" class="small" data-value="option3" tabindex="-1"><input type="checkbox">&nbsp;landmarks</a></li>              <li><a href="#" class="small" data-value="option4" tabindex="-1"><input type="checkbox">&nbsp;shopping</a></li>              <li><a href="#" class="small" data-value="option5" tabindex="-1"><input type="checkbox">&nbsp;churches</a></li>              <li><a href="#" class="small" data-value="option6" tabindex="-1"><input type="checkbox">&nbsp;tours , guides</a></li>            </ul>            <li><span class="photosicon nav-toggle-2 hidden-xs"></span></li>            <li><span class="infoicon nav-toggle-3 hidden-xs"></span></li>            <li><span class="searchicon hidden-xs"></span></li>          </ul>          <form class="navbar-form hidden-xs" role="search">            <div class="input-group">              <input type="text" class="form-control" placeholder="search" name="srch-term" id="srch-term">            </div>          </form>        </div><!-- /.navbar-collapse -->      </div><!-- /.container-fluid -->    </nav>  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37prr3j5elqxss1yvqotnepnhvp9aj7xs" crossorigin="anonymous"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">  <div class="container-fluid">    <nav class="navbar navbar-default" style="z-index:2;">      <!-- brand , toggle grouped better mobile display -->      <div class="navbar-header">        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">          <span class="sr-only">toggle navigation</span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>        </button>      </div>        <!-- collect nav links, forms, , other content toggling -->      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">        <ul class="nav navbar-nav">          <li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="locicon"></span></li>          <ul class="dropdown-menu">            <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox">&nbsp;museums , galleries</a></li>            <li><a href="#" class="small" data-value="option3" tabindex="-1"><input type="checkbox">&nbsp;landmarks</a></li>            <li><a href="#" class="small" data-value="option4" tabindex="-1"><input type="checkbox">&nbsp;shopping</a></li>            <li><a href="#" class="small" data-value="option5" tabindex="-1"><input type="checkbox">&nbsp;churches</a></li>            <li><a href="#" class="small" data-value="option6" tabindex="-1"><input type="checkbox">&nbsp;tours , guides</a></li>          </ul>          <li><span class="photosicon nav-toggle-2 hidden-xs"></span></li>          <li><span class="infoicon nav-toggle-3 hidden-xs"></span></li>          <li><span class="searchicon hidden-xs"></span></li>        </ul>        <form class="navbar-form hidden-xs" role="search">          <div class="input-group">            <input type="text" class="form-control" placeholder="search" name="srch-term" id="srch-term">          </div>        </form>      </div><!-- /.navbar-collapse -->    </nav>  </div>