Правильный путь к сетке в bootstrap
Как я использую сетку bootstrap system я хочу сделать форму & изображение подходит для всего экрана, но изображение keep выходит за пределы div это мой html:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="img/512.png" width="45" alt="" class="d-inline-block align-middle mr-2" style="float: left">
<!-- Logo Text -->
<span class="navbar-brand" style="color: #ffffff ;margin-left:0px;font-size: 30px;font-family: Assaf Font">Sudan Store</span>
<button data-toggle="collapse" class="navbar-toggle collapsed" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button></div>
<div
class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Store</a></li>
<li role="presentation"><a href="contact.html">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" size="35px">
</div>
<button class="btn btn-danger " type="button" data-toggle="modal" data-target="#x">Login</button>
</form>
</ul>
</div>
</div>
</nav>
<div class="container"style="margin-top: 80px">
<div class="tab-content" style="margin-left: 3%">
<div style="width: 100% ;height: 535px" class="thumbnail shadows ">
<div class="containerx col-sm-6" style="width: 45%;height: 100%" id="inner">
<form >
<label >Full Name</label>
<input type="text" class="inputtext" name="firstname" placeholder="Your full name..">
<label >Email Address</label>
<input type="email" class="inputtext" name="lastname" placeholder="Your email address..">
<label >Subject</label>
<textarea class="inputtext" name="subject" placeholder="Write Anythings.." style="height:200px;resize: none"></textarea>
<button class="inputsubmit" id="send">Send</button>
</form>
<div id="logo">
<img src="img/Sudan-512.png">
<h3>kjhkhkhhk</h3>
<p>jggkihkkjjljljljljlljlljlj</p>
</div>
</div>
<div id="thanks">
<img src="img/thanks.png">
</div>
</div>
</div>
</div>
</body>
и это мой CSS:
.shadows{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.inputtext {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical
}
.inputsubmit {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.containerx {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
#logo{
width: 20%;
margin-left: 740px;
margin-top: -450px;
}
#logo img{
width: 110px;
}
Что я уже пробовал:
контейнер и поля и отступы слева направо col-sm-6 col-xm-2 ничего не работают!!!