user6680 user6680 - 5 months ago 13
jQuery Question

Container header bar width won't go 100% with bootstrap

I set the width of .header to width:100% but it doesn't cover the ends of the screen only close to it. I'm using twitter bootstrap's grid to create this site.
Here's what it looks like http://andrewhnovak.com/newSite/index.html

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Demo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/mainPage.css">


</head>

<body>

<div class="container">
<div class="header">
<div class='col-md-1'>
Logo
</div><!--end header container-->
<div class='col-md-2 col-md-offset-1'>
<div class='link1'>
<a href="#">Link1</a>
</div>
</div>
<div class='col-md-3'>
<div class='link2'>
<a href="#">Link2</a>
</div>
</div>
<div class='col-md-2'>
<div class='link3'>
<a href="#">Link3</a>
</div>
</div>
<div class='col-md-2'>
<div class='searchBar'>
<input type="text" class="form-control" placeholder="Search Box">
</div>
</div>
<div class='col-md-1'>
<div class='searchButton'>
<button class="btn btn-search" type="submit">Search</button>
</div>
</div>

</div>

</div>

<div class="container">
<div class='underHeader'>
{{outlet}}
</div>
</div>

<div class="container">
<div class='whiteBox'>
<div class='newProducts'>
</div>
</div>
</div>

</body>

<script src="js/jquery.easing-1.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/menu.js"></script>
<script type="text/javascript" src="js/libs/handlebars-v2.0.0.js"></script>
<script type="text/javascript" src="js/libs/ember-1.9.1.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>


Relevant CSS Code

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
}
.header {
background-color: black;
height: 50px;
width: 100%;
font-size: 15px;
font-weight: bold;
padding-top: 14px;
color: white;
}

.searchBar {
position: relative;
bottom: 6px;
width: 200px;
right: 21px;
}

.searchButton {
position: relative;
bottom: 6px;
}

.underHeader {
background-color: green;
height: 20px;
}

Answer
Change the padding left and right of class container to 0
.container{
padding-left:0;
padding-right:0}