I have these four tables, but I'm having a big problem that I can not solve. The fourth table is below the others and not next to
.price-page {
background: none;
margin-bottom: 130px;
}
.container {
width: 970px;
}
.container {
width: 750px;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.col-md-4, .col-md-10 {
float: left;
}
.col-md-4, .col-md-10 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.text-center {
text-align: center;
}
.price .pricing-switcher {
margin-bottom: 30px;
}
.btn-group, .btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.price .btn:first-child {
border-radius: 5px;
}
.price .pricing-switcher .btn {
background-color: white;
color: #0076BC;
border: none;
}
.price .pricing-switcher .btn {
padding: 6px 10px;
}
.btn:hover.btn-info, .btn:focus.btn-info, .btn.focus.btn-info, .btn:active.btn-info, .btn.active.btn-info {
color: #7f858f;
border-color: #e8e9ed;
}
.btn-group>.btn:first-child {
margin-left: 0;
}
.btn-group>.btn:hover, .btn-group-vertical>.btn:hover, .btn-group>.btn:focus, .btn-group-vertical>.btn:focus, .btn-group>.btn:active, .btn-group-vertical>.btn:active, .btn-group>.btn.active, .btn-group-vertical>.btn.active {
z-index: 2;
}
.btn.btn-info {
color: #2b2e33;
}
.btn:active, .btn.active {
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-group>.btn, .btn-group-vertical>.btn {
position: relative;
float: left;
}
.btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info {
background-image: none;
}
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info {
color: #2b2e33;
background-color: rgba(26,26,26,0);
border-color: #c6c9d2;
}
.btn:active, .btn.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
.btn-info {
background-color: white;
}
.btn-info {
color: #2b2e33;
background-color: transparent;
border-color: #e8e9ed;
}
.btn {
display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 9px 20px;
font-size: 14px;
line-height: 2.14285714;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
font-weight: 400;
margin-bottom: .7em;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
.price .pricing-switcher .btn:last-child {
border-radius: 0 50% 50% 0;
}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
margin-left: -1px;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-4 {
width: 33.33333333%;
}
.price .cd-pricing-wrapper {
position: relative;
}
ul {
padding-left: 0;
list-style: none;
}
ul, ol {
margin-top: 0;
margin-bottom: 14.5px;
}
.panel-default.lite {
border-color: #6aa7ec;
}
.panel {
-webkit-box-shadow: none;
box-shadow: none;
}
.panel-default {
border-color: #e8e9ed;
}
.panel {
margin-bottom: 29px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 5px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.price .panel-price .panel-heading {
padding: 35px 0 20px;
}
.precos>div ul li>div:first-child {
background-color: #f1f7ff;
}
.panel-default>.panel-heading {
color: #7f858f;
background-color: #fff;
border-color: #e8e9ed;
}
.precos>div ul li>div {
background-color: white;
}
.panel-heading {
padding: 20px 30px;
border-bottom: 1px solid transparent;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.panel-heading .nome-plano {
font-size: 25px;
}
.blue {
color: #0076bc;
}
.price .panel-price .panel-heading .currency {
vertical-align: text-top;
font-size: 18px;
}
.price .panel-price .panel-heading .currency, .price .panel-price .panel-heading .period {
color: #c8c9cc;
font-size: 14px;
font-weight: 400;
}
.price .panel-price .panel-heading .period {
vertical-align: sub;
}
a {
color: #7f858f;
text-decoration: none;
}
a {
background-color: transparent;
}
.price .panel-price .panel-body {
padding: 20px 20px;
}
.panel-body {
padding: 10px 30px 20px;
}
ul ul, ol ul, ul ol, ol ol {
margin-bottom: 0;
}
ul.list-styled.list-style-ok li.texto {
line-height: 41px;
color: #777;
}
ul.list-styled li {
margin: 14px 0;
}
.price .cd-pricing-wrapper .is-hidden {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
ul.list-styled li.disabled {
color: #c8c9cc;
}
.price .cd-pricing-wrapper.panel-highlited .panel {
-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
box-shadow: 0 1px 10px rgba(0,0,0,.1);
}
p {
margin: 0 0 2.14em;
}
p {
margin: 0 0 14.5px;
}
[data-toggle="buttons"]>.btn input[type="radio"], [data-toggle="buttons"]>.btn-group>.btn input[type="radio"], [data-toggle="buttons"]>.btn input[type="checkbox"], [data-toggle="buttons"]>.btn-group>.btn input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
}
input[type="radio"], input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px ;
line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input, button, select, textarea {
font-family: Open Sans;
font-size: inherit;
line-height: inherit;
}
input {
line-height: normal;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
ul.list-styled li.vip {
color: #fb7f00;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleum.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<section class="price price-page" id="pricing">
<div class="container">
<div class="cd-pricing-container">
<div class="cd-pricing-list cd-bounce-invert precos">
<div class="row precos col-md-10 col-md-offset-1">
<div class="col-md-4 ">
<ul class="cd-pricing-wrapper">
<li class="panel panel-price panel-default lite is-visible">
<div class="panel-heading text-center">
<div class="nome-plano blue">1 Starter</div>
<h2><span class="currency">€ </span>9 900<sup>,00</sup><span class="period"> por cliente</span></h2>
<a class="btn btn-info" href="eu-quero">Comprar</a>
</div>
<div class="panel-body text-center">
<ul class="list-styled list-style-ok">
<li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png"border="0"> Base Package<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> SP40 Training
</li>
</ul><!--list-styled lis-styled-ok-->
</div><!--panel-body text-center-->
</li><!--panel panel-price panel-default lite is-visible-->
</ul><!--cd-pricing-wrapper-->
</div><!--col-md-4-->
<div class="col-md-4 ">
<ul class="cd-pricing-wrapper panel-highlited">
<li class="panel panel-price panel-default lite is-visible">
<div class="panel-heading text-center">
<div class="nome-plano blue">2 Production Basics</div>
<h2><span class="currency">€ </span>17 650<sup>,00</sup><span class="period"> por cliente</span></h2>
<a class="btn btn-info" href="eu-quero">Comprar</a>
</div>
<div class="panel-body text-center">
<ul class="list-styled list-style-ok">
<li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png"border="0"> Base Package<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M12a Technical Drawings<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M13 BOM<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> V-PRO Cutting Optimization Drawings<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> SP60 Training
</li>
</ul><!--list-styled list-styled-ok-->
</div><!--panel-body text-center-->
</li><!--panel panel-price panel-default lite is-visible-->
</ul><!--cd-pricing-wrapper panel-highlited-->
</div><!--col-md-4-->
<div class="col-md-4">
<ul class="cd-pricing-wrapper panel-highlited">
<li class="panel panel-price panel-default lite is-visible">
<div class="panel-heading text-center">
<div class="nome-plano blue">3 Production Machines</div>
<h2><span class="currency">€ </span>21 620<sup>,00</sup><span class="period"> por cliente</span></h2>
<a class="btn btn-info" href="eu-quero">Comprar</a>
</div>
<div class="panel-body text-center">
<ul class="list-styled list-style-ok">
<li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png"border="0"> Base Package<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M12a Technical Drawings<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M12b CNC Machine's Comunication<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M13 BOM<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> V-PRO PP Cutting Optimization Panel Saw's Comunication<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> SP80 Training
</li>
</ul><!--list-styled list-styled-ok-->
</div><!--panel-body text-center-->
</li><!--panel panel-price panel-default lite is-visible-->
</ul><!--cd-pricing-wrapper panel-highlited-->
</div><!--col-md-4-->
<div class="col-md-4">
<ul class="cd-pricing-wrapper panel-highlited">
<li class="panel panel-price panel-default lite is-visible">
<div class="panel-heading text-center">
<div class="nome-plano blue">4 Production Complete</div>
<h2><span class="currency">€ </span>35 090<sup>,00</sup><span class="period"> por cliente</span></h2>
<a class="btn btn-info" href="eu-quero">Comprar</a>
</div>
<div class="panel-body text-center">
<ul class="list-styled list-style-ok">
<li class="texto"><img src="http://i66.tinypic.com/24g3sdd.png"border="0"> Base Package<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M03 Auto Item Generation<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M10 Package Optimization<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M11 Group Different Order's Components<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M12a Technical Drawings<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M12b CNC Machine's Comunication<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> M13 BOM<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> V-PRO PP Cutting Optimization Panel Saw's Comunication<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> Psmart Shop Floor Control<p></p>
<img src="http://i66.tinypic.com/24g3sdd.png"border="0"> SP120 Training
</li>
</ul><!--list-styled list-styled-ok-->
</div><!--panel-body text-center-->
</li><!--panel panel-price panel-default lite is-visible-->
</ul><!--cd-pricing-wrapper panel-highlited-->
</div><!--col-md-4-->
</div><!--row-->
</div><!--cd-pricing-list cd-bounce-invert precos-->
</div> <!-- .cd-pricing-container -->
</div><!--container-->
</section>
</body>
</html>