html - How do I get rid of white space on the right side? -
i have found mysterious white space on right side underneath toolbar next picture have should extend way edge. if nav bar extends far. didnt notice need scroll on right see it. have tried playing around width on photo , nav bar. same thing appears on footer, seems in alignment photo leads me believe navbar on extending. have tried deleteing few things in navbar but, nothing seems fix problem.
html:
<div class="row"> <nav class="navbar navbar-custom" role="navigation"> <div class="navbar-header-xs"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav"> <li><a href="index.html"><img src= "images/logo.png" /></a></li> <li><a href="stuff.html">work</a></li> <li><a href="stuff.html">about</a></li> <li><a href="stuff.html">skills</a></li> <li><a href="stuff.html">contact</a></li> </ul> </div> </nav> </div> <div class="top"> <img src= "images/picture.png" class="img-responsive" /> </div> <div id="footer"> <div class="container"> footer stuff </div> </div> css:
body { padding: 0px; margin-top: align; background size: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .navbar { margin-bottom: 0; max-width: 100%; } .navbar-custom { background-color:#cce1f4; border-radius:2px; font-size: 22px; } .navbar-custom .navbar-brand { color: #2f4f7f; } .navbar-custom .navbar-nav > li > { color: #2f4f7f; } .navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus { color: #000000; background-color: transparent } .navbar-custom .navbar-toggle { border-color: #2f4f7f; float: left; margin-left: 40px; } .navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus { background-color: #2f4f7f; } .navbar-custom .navbar-toggle .icon-bar { background-color: #2f4f7f; } .navbar-nav > li{ align: left; padding-left:15px; padding-right:25px; padding-top:5px; } .top { max-width: 100%; } @media screen , (min-width:400px) { .text-left {font-size:140%;} } @media screen , (min-width:770px) { .text-left {font-size:170%;} } @media screen , (min-width:400px) { .intro {font-size:230%;} } @media screen , (min-width:770px) { .intro {font-size:270%;} } #footer { height: 60px; background-color: #f5f5f5; } .left { float:left; align: left; } .right { float:right; }
you don't need row (causing overflow) outside navbar, don't believe there class of .navbar-header-xs navbar-header, , add consistency css far selectivity.
see working examples @ different widths in snippet.
body { padding: 0px; margin-top: align; background size: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .navbar.navbar-custom { margin-bottom: 0; max-width: 100%; } .navbar.navbar-custom { background-color: #cce1f4; border-radius: 2px; font-size: 22px; } .navbar.navbar-custom .navbar-brand { color: #2f4f7f; } .navbar.navbar-custom.navbar-nav > li > { color: #2f4f7f; } .navbar.navbar-custom .navbar-nav > li > a:hover, .navbar.navbar-custom .navbar-nav > li > a:focus { color: #000000; background-color: transparent } .navbar.navbar-custom .navbar-toggle { border-color: #2f4f7f; float: left; margin-left: 40px; } .navbar.navbar-custom .navbar-toggle:hover, .navbar.navbar-custom .navbar-toggle:focus { background-color: #2f4f7f; } .navbar.navbar-custom .navbar-nav > li { text-align: left; padding-left: 15px; padding-right: 25px; padding-top: 5px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <nav class="navbar navbar-default navbar-custom" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-nav1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-nav1"> <ul class="nav navbar-nav"> <li> <a href="index.html"> <img src="http://placehold.it/20x20" /> </a> </li> <li><a href="stuff.html">work</a> </li> <li><a href="stuff.html">about</a> </li> <li><a href="stuff.html">skills</a> </li> <li><a href="stuff.html">contact</a> </li> </ul> </div> </nav> </div> <div class="container"> <div class="top"> <img src="http://placehold.it/1850x750/f00/fff" class="img-responsive" /> </div> </div> <hr> <nav class="navbar navbar-default navbar-custom" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-nav2"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-nav2"> <ul class="nav navbar-nav"> <li> <a href="index.html"> <img src="http://placehold.it/20x20" /> </a> </li> <li><a href="stuff.html">work</a> </li> <li><a href="stuff.html">about</a> </li> <li><a href="stuff.html">skills</a> </li> <li><a href="stuff.html">contact</a> </li> </ul> </div> </div> </nav> <div class="container"> <div class="top"> <img src="http://placehold.it/1850x750/f00/fff" class="img-responsive" /> </div> </div>
Comments
Post a Comment