0
I have these four tables, but I have a big problem that I can not solve. The fourth table is below the others and not next
.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 \9;
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>
You are using the CSS class
col-md-4within an element with classcol-md-10. You know what that means?– Woss
@Andersoncarloswoss apparently can’t help me?
– Melissa Sousa
These are classes that are part of the Bootstrap grid system. It might be interesting to study it before trying to use it. There’s something about the documentation officer.
– Woss