title: Navbar not working the way I want it to, list going outside of screen to the left
body: <p>I'm having trouble with my mobile navbar, which has a collapsable menu on the left. As you can see in the picture, I would like to have everything inline and in order, I put colored borders so that you can better understand.</p>
  
  <p>The main problem is that the yellow border seems to go outside of the page, to the left.
  <a href="https://i.stack.imgur.com/HZrBr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZrBr.jpg" alt="image"></a>
  </p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;Bootstrap Case&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;       &lt;/script&gt;
  &lt;script  src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;nav&gt;
  
  &lt;div class="total"&gt;
  &lt;ul class="nav navbar-nav"&gt;
  
      &lt;li &gt;
        &lt;div class="id"&gt;&lt;a  style="width:100px" data-toggle="dropdown" href="#"&gt;Page 1 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;My details&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt; My account&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;div class="no"&gt;&lt;p class="bartitle"&gt;&lt;b&gt;Title of Page&lt;/b&gt;&lt;/p&gt;&lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>&lt;style&gt;
  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
  body {
  margin: 0;
  padding: 0;
  background: rgba(36, 96, 70, 1);
  width:100%;
  }
  
  nav {
  width: 100%;
  margin:0 auto; 
  padding:0;
  }
  ul {
  position:relative;
  margin-top:-10px;
  list-style: none;
  width:105%;
  padding: 0;
  margin-left:10px;
  height:70px;
  border:solid yellow;*/
  }
  nav div ul li .id {
  margin-top:-10px;
  margin:10px;
  float:left;
  width:15%;
  border:solid pink;*/
  }
  
  li .no {
  
  float:left;
  width:78%;
  border:solid blue;*/
  }
  .id  {
  
  width: 20px;
  border: solid black;*/
  }
  
  .no  {
   width: 60px;
   height:50px;
   /*border: solid black;*/
   } 
  
  
  .total  {
  width:100%;
  font-family:arial;
  color:white;
  
  padding:0;
  display: block !important;
  width: 100%;
  background: #cdeb8e; /* Old browsers */
  background: -moz-linear-gradient(top,  
  #cdeb8e 0%, #b0ca34 100%); /* FF3.6+ */
  background: rgba(36,96,70, 1);
  border:solid black;*/
  }  
  .barimage {
  margin-top:15px;
  width:120px;
  height:120px;
  border:0;
  }    
  .bartitle {
  font-size:30px;
  text-align:left;
  }
  .dropdown-menu {
  
  width:40px;
  }
  }
  &lt;/style&gt;
  </code></pre>