我的容器周围有白色边框

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

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

.panel-default {
    border: none;
}

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

Answer 2

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
}