using bootstrap. Pretty fun and interesting over all.
I just have this prob where some of my divs w/a span12 reach all the way to the side of the browser window. and two dont’ stopping about 50px shy on each side.
I put my code below. I have used the original bootstrap settings for width. they are just span12 so they should reach across.
<!DOCTYPE html>
<html>
<head>
<title>cdiStuff</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid">
<div id="preHeader" class="row-fluid">
<div class="span4">
<p>this would be the preheader</p>
</div>
<div class="span8">
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search">
</form>
</div>
</div> <!-- row-fluid preHeader end -->
<div class="row-fluid">
<header class="row-fluid">
<div class="span12">
<img src="coreImg/coreLogo100x100px.png" />
</div>
</header>
</div> <!-- row-fluid header end -->
<nav class="row-fluid">
<nav class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">core</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">home</a></li>
<li><a href="#">page01</a></li>
<li><a href="#">page02</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">blog</a></li>
</ul>
</div> <!-- collapseCollapse end -->
</nav>
</div> <!-- nav row-fluid end -->
</nav> <!-- row-fluid end -->
<div id="postNav" class="row-fluid">
<div class="span12">
<p>this would be the postNav</p>
</div>
</div> <!-- row-fluid postNav end -->
<div class="row-fluid">
<div id="minHeader01" class="span8 offset4">
<h4>it's a span8 kinda world</h4>
<p>similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p>
</div>
</div> <!-- row-fluid end -->
<section id="mainBox">
<div class="row-fluid">
<div class="span4 offset4">
<h3>Temporibus</h3>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<div class="span4">
<h3>Temporibus</h3>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
</div> <!-- row-fluid end -->
<div class="row-fluid">
<div class="span4 offset4">
<h3>Temporibus</h3>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<div class="span4">
<h3>Temporibus</h3>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
</div> <!-- row-fluid end -->
</section>
<div class="row-fluid">
<div id="preFooter" class="span12">
<div id="vid01" class="span4">
<img src="coreImg/placehldr320x200.png" />
</div>
<div id="vid01" class="span4">
<img src="coreImg/placehldr320x200.png" />
</div>
<div id="vid01" class="span4">
<img src="coreImg/placehldr320x200.png" />
</div>
</div>
</div> <!-- row-fluid end -->
<div class="row-fluid">
<footer class="span12">
footer stuff
</footer>
</div>
</div> <!-- container-fluid end -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Any advice on how to fix this please?
thx