col- should always be the child of .row , this would be correct in Bootstrap:
<div class="row">
<div class="col-xs-4 col-md-4 col-sm-4">
...
</div>
</div>
And within ul can only use li , this would be correct and li can only be ul child:
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
In other words, you have a lot of problems with your code, so it affects Bootstrap behavior and therefore does not work.
Grid system documentation:
Corrected code
I changed img-responsive for a class itself and to remove the spaces add this:
.nospace > [class*=" col-"],
.nospace > [class^="col-"] {
padding: 0 !important;
margin: 0 !important;
}
.nospace > [class*=" col-"] .img,
.nospace > [class^="col-"] .img
{
display: block;
width: 100%;
}
Example on Bootply: link
*{
font-family: 'Lato', sans-serif;
font-weight: 300;
}
body{
padding-top: 50px;
background: #f2f2f2;
overflow: hidden;
}
.nospace > [class*=" col-"],
.nospace > [class^="col-"] {
padding: 0 !important;
margin: 0 !important;
}
.nospace > [class*=" col-"] .img,
.nospace > [class^="col-"] .img
{
display: block;
width: 100%;
}
/*LOGIN*/
.form-login{
max-width: 350px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border-radius: 10px;
background: #eee;
}
/*FIM LOGIN*/
.post:hover,
.entregue:hover,
.viagem:hover{
color: #00497f;
}
.post:focus,
.entregue:focus,
.viagem:focus{
color: #00497f;
}
/*.img1{
float: right;
}*/
/*.img2{
float: none;
}
.img3{
float: right;
}*/
.flex-centralizado {
display: flex;
justify-content: center;
}
li{
list-style-type: none;
}
/*
.viagem{
float: left;
padding-bottom: 0.625em;
padding-top: 0.625em;
}
*/
.entregue,
.viagem{
float: left;
padding-bottom: 0.625em;
padding-top: 0.625em;
}
.post{
float: left;
padding-bottom: 0.625em;
padding-top: 0.625em;
}
.lipostagem{
left: 86%;
position: relative;
}
.liviagem{
position: relative;
left: 120%;
}
.lientregue{
position: relative;
right: 73%;
}
/*#buscar-postagem{
left: 76%;
position: static;
}
#buscar-viagem{
float: left;
position: static;
}
#buscar-entregue{
right: 64%;
position: static;
}*/
.entregue,
.post,
.viagem{
color: #9b9b9b;
}
/*
.container{
width: 50%;
height: 100%;
margin: 0 auto;
}
*/
section{
margin: 2em 0;
overflow: hidden;
}
/*width: 50%;*/
.center{
left: 25%;
position: relative;
align-items: center;
}
/*
.tabela{
width: 30%;
position: relative;
right: 1%;
}
.table_one{
width: 10%;
position: relative;
left: 40%;
}
#table_two{
position: relative;
left: -15%;
width: 20%;
}
.Table_Entregue{
position: relative;
left: -5px;
}
#test{
padding: 1%;
width: 40%;
}
.cor{
background-color: ;
}
.um{
position: relative;
width: 100%;
/*left: 15%;*/
/*}*/
td{
font-weight:bold;
}
/*.hello{
position: relative;
width: 50%;
left: 40%;
}*/
/*.status{
width: 10%;
}*/
th{
width: 20%;
}
/*@-moz-document url-prefix() {
fieldset { display: table-cell; }
}*/
/*.teste{
float: left;
}*/
/* primeira imagem: https://forum.imasters.com.br/uploads/monthly_2017_11/teste.png.b6f5fec47f6928c3deb248244f50f8a2.png */
/*Segunda e ultima: https://forum.imasters.com.br/uploads/monthly_2017_11/cinza1.png.37adeed1167239d1681b644c01203ba6.png */
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row nospace">
<div class="col-xs-4 col-md-4 col-sm-4">
<a href="PostagemTeste.html">
<img class="img" src="https://auto.ndtvimg.com/car-images/medium/ferrari/gtc4lusso/ferrari-gtc4lusso.jpg?v=11"alt="Sucesso"> <span class="post">Postagem</span>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-4">
<a href="#">
<img class="img" src="https://auto.ndtvimg.com/car-images/medium/ferrari/gtc4lusso/ferrari-gtc4lusso.jpg?v=11"alt="Sucesso"><span class="viagem">Viagem</span>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-4">
<a href="EntregueCerto.html">
<img class="img" src="https://auto.ndtvimg.com/car-images/medium/ferrari/gtc4lusso/ferrari-gtc4lusso.jpg?v=11"alt="Sucesso"><span class="entregue">Entregue</span>
</a>
</div>
</div>
</div>
<div class="container">
<div class="table-responsive">
<table class="table" width="100px" align="center">
<thead>
<tr>
<th class="cor">Status:</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="container">
<div class="table-responsive">
<table class="table" width="100px" align="center">
<thead>
<tr class="cliente">
<th class="cor">Quantidade</th>
<!-- <td>1</td> -->
</tr>
<tr class="clientess">
<th class="cor">Nº.Pedido</th>
</tr>
<tr class="fiscal">
<th class="cor">Nota Fiscal</th>
<!-- <td>5874</td> -->
</tr>
<tr class="entprevista">
<th class="cor">Entrega Prevista</th>
<!-- <td>12-12-2017</td> -->
</tr>
</thead>
</table>
</div>
</div>
