CODEWITHSUNDEEP
htmlcsstwitter-bootstrapwhitespace
QBuno
QBuno

Reputation: 61

How do I get rid of white space on the right side?

I have found this mysterious white space on the right side underneath my toolbar next to a picture I have that should extend all the way to the edge. Its almost as if my nav bar extends too far. I almost didnt notice this as you need to scroll over to the right to see it. I have tried playing around with the width on the photo and the nav bar. The same thing also appears on the footer, it seems to be in alignment with the photo which leads me to believe its the navbar over extending. I have tried deleteing a few things in the navbar but, nothing seems to fix the 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 > a {
    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 only screen and (min-width:400px) {
    .text-left {font-size:140%;}
}

@media only screen and (min-width:770px) {
    .text-left {font-size:170%;}
}

@media only screen and (min-width:400px) {
    .intro {font-size:230%;}
}

@media only screen and (min-width:770px) {
    .intro {font-size:270%;}
}

#footer {
    height: 60px;
    background-color: #f5f5f5;
}

.left {
    float:left;
    align: left;
}
.right {
    float:right;
}

Upvotes: 1

Views: 699

Answers (1)

vanburen
vanburen

Reputation: 21663

You don't need a row (causing the overflow) outside your navbar, I don't believe there is a class of .navbar-header-xs just navbar-header, and I would add some consistency to your CSS as far as selectivity.

See working examples at 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 > a {
  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>

Upvotes: 1

Related Questions