White border lines around my container

Question

The vertical white lines on the left and right are the ones I do not want (not the horizontal ones, those are hr). I have no idea what's causing them.

<div class="container">
  <div class="row">
    <div class="col-lg-11">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="page-header">
            <img src="img/banner.jpg" width="100%" />
            <h1 class="text-center">POP UP MAKER MARKET</h1>
            <h5 class="text-center">The place where SU's best designers, artists, makers and hackers can sell their work.
								</br>
								<h3 class = "text-center">APPLY BELOW</h3>
							</div>
							
							<form class="form-horizontal" method = "post" action="submit.php" enctype = "multipart/form-data">
								<div class="form-group">
									<label for="name" class="col-sm-2 control-label">Name:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="name" name = "name">
									</div>
								</div>
								<div class = "form-group">
									<label for="inputEmail3" class="col-sm-2 control-label">Email:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="email" name = "email">
									</div>
								</div>
								<div class="form-group">
									<label for="phoneNumber" class="col-sm-2 control-label">Phone:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="phone" name = "phone">
									</div>
								</div>
								
								<div class="form-group">
									<label for="major" class="col-sm-2 control-label">Major:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="major" name = "major">
									</div>
								</div>
								
								<hr>
								
								<div class="form-group">
									<label for="itemForSale" class="col-sm-2 control-label">Item for Sale:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="itemForSale1" name = "itemForSale1">
									</div>
								</div>
								
								<div class="form-group">
									<label for="quantity" class="col-sm-2 control-label">Quantity:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id = "quantity1" name = "quantity1">
									</div>
								</div>
								
								<div class="form-group">
									<label for="price1" class="col-sm-2 control-label">Price:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" id="price1" name = "price1">
									</div>
								</div>
								
								<div class = "form-group">
									<label for="itemOneImg1" class="col-sm-2 control-label">Image 1:</label>
									<div class="col-sm-10">
										<input type = "file" accept=".jpg, .jpeg, .png" class = "form-control" name = "itemOneImg1">
				
									</div>
								</div>
								
								<div class = "form-group">
									<label for="itemOneImg2" class="col-sm-2 control-label">Image 2:</label>
									<div class="col-sm-10">
										<input type = "file" accept=".jpg, .jpeg, .png" class = "form-control" name = "itemOneImg2">
				
									</div>
								</div>
								
								<button type="button" class = "btn-default" id="additional-files">Additional files</button>
								
								<!-- Two -->
								<div class = "show-onclick">
									<hr>
									<div class="form-group">
										<label for="itemForSale2" class="col-sm-2 control-label">Item for Sale:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="itemForSale2" name = "itemForSale2">
										</div>
									</div>
									
									<div class="form-group">
										<label for="quantity2" class="col-sm-2 control-label">Quantity:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id = "quantity2" name = "quantity2">
										</div>
									</div>
									
									<div class="form-group">
										<label for="major2" class="col-sm-2 control-label">Price:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="price2" name = "price2">
										</div>
									</div>
									
									<div class = "form-group">
										<label for="itemTwoImg1" class="col-sm-2 control-label">Image 1:</label>
										<div class="col-sm-10">
											<input type = "file" accept=".jpg, .jpeg, .png" class = "form-control" name = "itemTwoImg1">
					
										</div>
									</div>
									
									<div class = "form-group">
										<label for="itemTwoImg2" class="col-sm-2 control-label">Image 2:</label>
										<div class="col-sm-10">
											<input type = "file" accept=".jpg, .jpeg, .png" class = "form-control" name = "itemTwoImg2">
					
										</div>
									</div>
								</div>
								
								<!-- END TWO -->
								
								<button class = "show-onclick btn-default" type="button" id="additional-files1">Additional files</button>
								
								<!-- THREE -->
								<div class = "show-onclick1 form-group">
									<hr>
									<div class="form-group">
										<label for="itemForSale3" class="col-sm-2 control-label">Item for Sale:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="itemForSale3" name = "itemForSale3">
										</div>
									</div>
									
									<div class="form-group">
										<label for="quantity3" class="col-sm-2 control-label">Quantity:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id = "quantity3" name = "quantity3">
										</div>
									</div>
									
									<div class="form-group">
										<label for="price3" class="col-sm-2 control-label">Price:</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="price3" name = "price3">
										</div>
									</div>
									
									<div class = "form-group">
										<label for="itemThreeImg1" class="col-sm-2 control-label">Image 1:</label>
										<div class="col-sm-10">
											<input type = "file" accept=".jpg, .jpeg, .png" class = "form-control" name = "itemThreeImg1">
					
										</div>
									</div>
									
									<div class = "form-group">
										<label for="itemThreeImg2" class="col-sm-2 control-label">Image 2:</label>
										<div class="col-sm-10">
											<input type = "file" accept=".jpg, .jpeg, .png" class = "form-control" name = "itemThreeImg2">
					
										</div>
									</div>
								</div>
								
								<input id="submit" name="submit" type="submit" value="Submit" class="btn btn-primary pull-right">
							</form>
							
						</div>
					</div>
				</div>
			</div>
			
			<div class = "row">
				<div class = "col-md-6">
					<h3>DETAILS</h3>
					<p>
						The shop will be open from November 9th until Finals week in the Marshall Square Mall.
					</p>
					</br>
					<p>
						Dropoffs will take place on November 6th & 7th.
					</p>
					</br>
					<p>
						10% commission on sold items.
					</p>
				</div>
				
				<div class = "col-md-6">
					<h3>CONTACT</h3>
					<p>
						We can be reached at <a class = "link" href = "mailto:designtoable@gmail.com?Subject=Form%20Contact" target = "_top">designtoable@gmail.com</a>
					</p>
				</div>
			</div>
		</div>

That's my HTML.

@font-face {
    font-family: Futura;
    src: url(futura-medium.tff !important);
	color: #ffffff;
}

input[type="text"] { 
	color:white !important;
} 

input[type="email"] { 
	color:white !important;
} 

.model-content {
	color:black !important;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.navbar-default {
    background-color: #000000;
}

body {
	background: #f05324 !important; 
	margin-bottom: 80px;
	color: #ffffff;
}

.page-header, .panel-body, .panel, .panel-default, .col-lg-9, .row {
	background: #f05324 !important; 
}

.form-control{
    background-color: #f05324;
    color: #000000;
}

hr {
	border-color: #ffffff;
	background-color: #ffffff;
	color: #ffffff;
}

.link {
	color: #ffffff;
}

.page-header {
	margin-top: 0;
}

.panel-body {
	padding-top: 0;
}

.img-featured {
	margin-top   : 15px;
	margin-bottom: 15px;
	margin-right : 15px;
}

.img-project{
	margin-top   : 15px;
	margin-bottom: 15px;
}

.show-onclick {
	display: none;
}

.show-onclick1 {
	display: none;
}

.block {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: // half the width of your img
}

Here's my CSS.

Any idea what could be causing this? It's very annoying.

Answer 1

most probably this border is of "panel panel-default" this div so removing border from this div may disappear this

div.panel.panel-default{
border:none
}

otherwise try this

.col-lg-11, panel, panel-body{
border:none
}

Answer 2

It's actually coming from the panel-default class. Try:

.panel-default {
    border: none;
}

Here's your fiddle: http://jsfiddle.net/8vppzk1z/