0
ブートストラップ応答画面サイズに問題があります。何らかの理由でウィンドウが767pxより小さい場合、約30px以上のパディングが私はそれを取り除く方法を知らない。画面サイズが小さい場合は、正しいサイズの白いバーが大きくなります。私に手を差し伸べてもらえますか？ Here is a link for files右側の大きな空白オンスクリーンサイズ767px以下ブートストラップレスポンス
ここでは、コードスニペットが動作していないscreenshot Bootstrap.responsive
@media(max-width:767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
margin-right: -20px;
margin-left: -20px;
}
.container-fluid {
padding: 0
}
.dl-horizontal dt {
float: none;
width: auto;
clear: none;
text-align: left
}
.dl-horizontal dd {
margin-left: 0
}
.container {
width: auto
}
.row-fluid {
width: 100%
}
.row,
.thumbnails {
margin-left: 0
}
.thumbnails>li {
float: none;
margin-left: 0
}
[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.span12,
.row-fluid .span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0
}
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
display: inline-block;
width: auto
}
.controls-row [class*="span"]+[class*="span"] {
margin-left: 0
}
.modal {
position: fixed;
top: 20px;
right: 20px;
left: 20px;
width: auto;
margin: 0
}
.modal.fade {
top: -100px
}
.modal.fade.in {
top: 20px
}
}
@media(max-width:480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0)
}
.page-header h1 small {
display: block;
line-height: 20px
}
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc
}
.form-horizontal .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left
}
.form-horizontal .controls {
margin-left: 0
}
.form-horizontal .control-list {
padding-top: 0
}
.form-horizontal .form-actions {
padding-right: 10px;
padding-left: 10px
}
.media .pull-left,
.media .pull-right {
display: block;
float: none;
margin-bottom: 10px
}
.media-object {
margin-right: 0;
margin-left: 0
}
.modal {
top: 10px;
right: 10px;
left: 10px
}
.modal-header .close {
padding: 10px;
margin: -10px
}
.carousel-caption {
position: static
}
}
のmain.css
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
.clearfix{*zoom:1}
.clearfix:before,
.clearfix:after{
\t display:table;
\t content:"";
\t line-height:0
\t }
.clearfix:after{
\t clear:both
\t }
.hide-text{
\t font:0/0 a;
\t color:transparent;
\t text-shadow:none;
\t background-color:transparent;
\t border:0
\t }
.input-block-level{
\t display:block;
\t width:100%;
\t min-height:30px;
\t -webkit-box-sizing:border-box;
\t -moz-box-sizing:border-box;
\t box-sizing:border-box
\t }
body{
\t padding-top:80px;
\t font-size:12px;
\t color:#34495e;
\t background:#f5f5f5
\t width:100%;
}
body h1,body h2,body h3,body h4,body
.created{
\t font-family:"Fjalla One";
\t font-weight:normal
\t }
body h5{margin:0}
body h3,body h4{margin-top:0}
body h6{margin:0;font-family:"roboto_thregular"; font-size: "24px"}
body
.btn{
\t -webkit-border-radius:0;
\t -moz-border-radius:0;
\t border-radius:0;
\t border:0;
\t background-image:none;
\t text-shadow:none;
\t -webkit-box-shadow:none;
\t -moz-box-shadow:none;
\t box-shadow:none
\t }
\t .btn.btn-transparent{
\t \t border:3px solid #fff;
\t \t background:transparent;
\t \t color:#fff
\t \t }
\t .btn.btn-transparent:hover{ \t border-color:rgba(255,255,255,0.5)}
\t .btn.btn-link{color:#bb0300;padding:0}
\t .btn.btn-link:hover{text-decoration:none}
\t .btn-primary{background-color:#bb0300}
\t .btn-primary:hover{background-color:#ff0200}
\t a{color:#bb0300;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}
\t a:hover,
\t a:focus{color:#ff0200;text-decoration:none;outline:0}
\t .dropdown-menu{margin-top:-1px;min-width:180px; color:#bb0300 }
\t body>section{padding:5px 0}
\t body>section
\t #slide-show{padding:0}
\t #recent-works{background:#bb0300;color:#fff}
\t #recent-works .links>a{background:#fff;color:#bb0300;text-shadow:none}
\t #clients{background:#fff}
\t #clients h4{color:#999}
\t #clients .carousel{margin-bottom:0}
\t #clients .clients ul.thumbnails{margin:0}
\t #clients .clients ul.thumbnails>li{text-align:center;margin-bottom:0}
\t #clients .prev,
\t #clients .next{color:#999}
\t .title{background:#bb0000;color:#fff;padding:20px 0}
\t .center{text-align:center}
\t .box{
\t \t background-color:#fff;
\t \t border-top:1px solid #f0f0f0;
\t \t -webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);
\t \t box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);
\t \t padding:10px;
\t \t -webkit-border-radius:4px;
\t \t -moz-border-radius:4px;
\t \t border-radius:4px
\t \t }
\t .progress{margin-bottom:10px}
\t .progress,.progress .bar{
\t \t -webkit-border-radius:0;
\t \t -moz-border-radius:0;
\t \t border-radius:0;
\t \t background-image:none;
\t \t -webkit-box-shadow:none;
\t \t -moz-box-shadow:none;
\t \t box-shadow:none;
\t \t text-shadow:none;
\t \t height:30px;
\t \t line-height:30px
\t \t }
\t .label,.badge{font-weight:300;font-size:90%}
\t ul.breadcrumb{margin:12px 0 0;background:transparent}
\t ul.breadcrumb>li{text-shadow:none}
\t ul.breadcrumb>li>a,ul.breadcrumb>li .divider{color:#fff}
\t ul.breadcrumb>li.active{color:rgba(255,255,255,0.7)}
\t ul.tag-cloud li{display:inline-block;margin:0 0 2px 0}
\t .btn-social{border:0;color:#fff;text-shadow:0 1px rgba(0,0,0,0.5)}
\t .btn-social.btn-facebook{background:#4f7dd4}
\t .btn-social.btn-facebook:hover{background:#789bde}
\t .btn-social.btn-twitter{background:#5bceff}
\t .btn-social.btn-twitter:hover{background:#8eddff}
\t .btn-social.btn-linkedin{background:#21a6d8}
\t .btn-social.btn-linkedin:hover{background:#49b9e3}
\t .btn-social.btn-google-plus{background:#dc422b}
\t .btn-social.btn-google-plus:hover{background:#e36957}
\t .btn-social:hover{color:#fff}
\t header.navbar .navbar-inner{
\t \t background:#fff!important;
\t \t border:0;
\t \t -webkit-box-shadow:none;
\t \t -moz-box-shadow:none;
\t \t box-shadow:none
\t \t }
\t header #logo{
\t \t width:435px;
\t \t height:80px;
\t \t background:url(../images/logo/trlogo.png) no-repeat 0 50%
\t \t }
\t header.navbar{
\t \t margin-bottom:0
\t \t }
\t header.navbar .nav{ \t margin-top:20px}
\t header.navbar .nav>li{margin-left:1px}
\t header.navbar .nav>li>a{
\t \t padding-top:10px;
\t \t padding-bottom:10px;
\t \t color:#333;
\t \t font-family:"Fjalla One";
\t \t font-size:14px;
\t \t text-transform:uppercase;
\t \t text-shadow:none
\t \t }
\t \t header.navbar .nav>li>a:hover{
\t \t \t background:transparent;
\t \t \t color:#bb0300;
\t \t \t -webkit-box-shadow:none;
\t \t \t -moz-box-shadow:none;
\t \t \t box-shadow:none
\t \t \t }
\t \t header.navbar .nav>li.active>a,header.navbar .nav>li.active>a:hover{
\t \t \t background:transparent;
\t \t \t color:#bb0300;
\t \t \t -webkit-box-shadow:none;
\t \t \t -moz-box-shadow:none;
\t \t \t box-shadow:none
\t \t \t }
\t \t header.navbar .nav>li.dropdown.open>a.dropdown-toggle{
\t \t \t background:transparent;
\t \t \t color:#bb0300
\t \t \t }
\t \t header.navbar .nav>li.login>a{ \t border-left:1px solid #e5e5e5 \t }
\t \t header .dropdown-menu{margin-top:20px; color:#bb0300 }
\t \t header .dropdown-menu:before{display:none!important}
\t \t .navbar .nav li.dropdown.open>.dropdown-toggle,.navbar .nav li.dropdown.active>.dropdown-toggle,.navbar .nav li.dropdown.open.active>.dropdown-toggle{
\t \t \t background-color:transparent;
\t \t \t color:#bb0300
\t \t \t }
\t \t .navbar .nav>.active>a,.navbar .nav>.active>a:hover,.navbar .nav>.active>a:focus{
\t \t \t -webkit-box-shadow:none;
\t \t \t -moz-box-shadow:none;
\t \t \t box-shadow:none
\t \t \t }
\t \t .navbar .nav>li>a:focus,.navbar .nav>li>a:hover{color:#bb0300}
\t \t .dropdown-menu{-webkit-border-radius:0;-moz-border-radius:0; border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;padding:0;border:0}
\t \t .dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a{
\t \t \t background:#bb0300
\t \t \t }
\t \t \t .main-info{
\t \t \t \t background-color:#fff;
\t \t \t \t color:#3a3a3a
\t \t \t }.main-info h4{
\t \t \t \t color:#706f6f
\t \t \t }
\t \t \t .icon-medium{
\t \t \t \t font-size:18px;
\t \t \t \t width:18px;
\t \t \t \t line-height:18px;
\t \t \t \t text-align:center;
\t \t \t \t display:inline-block;
\t \t \t \t background:#db2323;
\t \t \t \t padding:10px;
\t \t \t \t -webkit-border-radius:100%;
\t \t \t \t -moz-border-radius:100%;
\t \t \t \t border-radius:100%;
\t \t \t \t color:#fff
\t \t \t \t }
\t \t \t .modal{border:0}
\t \t \t .modal#loginForm{width:600px;margin-left:-300px}
\t \t \t .modal .modal-header{border:0;padding:20px 20px 0}
\t \t \t .modal .modal-header>h4{font-weight:300;font-size:14px;color:#848484;text-transform:uppercase;margin:0}
\t \t \t .modal .modal-body{padding:20px}
\t \t \t .modal input[type="text"],.modal input[type="password"]{padding:5px 10px;min-height:30px;width:130px;margin-right:10px}
\t \t \t .modal .icon-remove{
\t \t \t \t color:#848484;
\t \t \t \t position:absolute;
\t \t \t \t right:-5px;
\t \t \t \t top:-5px;
\t \t \t \t width:16px;
\t \t \t \t height:16px;
\t \t \t \t line-height:16px;
\t \t \t \t text-align:center;
\t \t \t \t display:block;
\t \t \t \t background:#ebebeb;
\t \t \t \t -webkit-border-radius:100%;
\t \t \t \t -moz-border-radius:100%;
\t \t \t \t border-radius:100%;
\t \t \t \t cursor:pointer
\t \t \t \t }
\t \t \t \t .modal button{margin-left:10px;border:0}
\t \t \t \t .gap{margin-bottom:50px}
\t \t \t \t .big-gap{margin-bottom:100px}
\t \t \t \t .no-margin{margin:0;padding:0}
\t \t \t \t #services{background:#252525;color:#999}
\t \t \t \t #services h1,#services h2,#services h3,#services h4,#services h5,#services h6{color:#fff}
\t \t \t \t #main-contents{margin-top:20px}
\t \t \t \t #main-contents .blog-news .created{font-size:18px;color:#2dcc70}
\t \t \t \t .registration-form{
\t \t \t \t \t border:0;
\t \t \t \t \t background-color:#fff;
\t \t \t \t \t border-top:1px solid #f0f0f0;
\t \t \t \t \t -webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);
\t \t \t \t \t -moz-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);
\t \t \t \t \t box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);
\t \t \t \t \t padding:20px;
\t \t \t \t \t display:inline-block}#bottom{background:#000000;
\t \t \t \t \t color:#6f6f6f
\t \t \t \t \t }
\t \t \t \t \t #bottom h4{margin-top:0;margin-bottom:15px}
\t \t \t \t \t #bottom h1,#bottom h2,#bottom h3,#bottom h4,#bottom h5,#bottom h6{color:#fff}
\t \t \t \t \t #bottom a{color:#6f6f6f}
\t \t \t \t \t #bottom a:hover{color:#2dcc70}
\t \t \t \t \t #bottom ul.address>li{position:relative;padding-left:20px;margin-top:10px}
\t \t \t \t \t #bottom ul.address>li:first-child{margin-top:0}
\t \t \t \t \t #bottom ul.address>li>i{position:absolute;top:3px;left:0}
\t \t \t \t \t #bottom ul.thumbnails{margin-bottom:0}
\t \t \t \t \t #bottom ul.thumbnails li{
\t \t \t \t \t \t margin-bottom:5px;
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.arrow,ul.arrow-double,ul.tick,ul.cross,ul.star,ul.rss{
\t \t \t \t \t \t \t list-style:none;padding:0;margin:0;
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before,ul.arrow li::after,ul.arrow-double li::after,ul.tick li::after,ul.cross li::after,ul.star li::after,ul.rss
\t \t \t \t \t \t li::after{
\t \t \t \t \t \t \t font-family:FontAwesome;
\t \t \t \t \t \t \t font-size:11px;
\t \t \t \t \t \t \t }
\t \t \t \t \t \t ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before{margin-right:5px}
\t \t \t \t \t \t ul.arrow li::before{content:"\f105"}
\t \t \t \t \t \t ul.arrow-double li::before{content:"\f101"}
\t \t \t \t \t \t ul.tick li::before{content:"\f00c"}
\t \t \t \t \t \t ul.cross li::before{content:"\f00d"}
\t \t \t \t \t \t ul.star li::before{content:"\f006"}
\t \t \t \t \t \t ul.rss li::before{content:"\f09e"}
\t \t \t \t \t \t #footer{
\t \t \t \t \t \t \t background:#333;
\t \t \t \t \t \t \t padding-top:15px;
\t \t \t \t \t \t \t padding-bottom:15px;
\t \t \t \t \t \t \t color:#666;
\t \t \t \t \t \t }
\t \t \t \t \t \t #footer a{color:#666}
\t \t \t \t \t \t #footer a:hover{color:#ef0909}
\t \t \t \t \t \t #footer #gototop{height:40px;
\t \t \t \t \t \t line-height:40px;
\t \t \t \t \t \t width:40px;
\t \t \t \t \t \t text-align:center;
\t \t \t \t \t \t display:inline-block;
\t \t \t \t \t \t background:#1d1d1d;
\t \t \t \t \t \t font-size:24px;
\t \t \t \t \t \t color:#fff;
\t \t \t \t \t \t }
\t \t \t \t \t \t #footer #gototop:hover{
\t \t \t \t \t \t \t background:#bb0000;
\t \t \t \t \t \t \t text-decoration:none;
\t \t \t \t \t \t }
\t \t \t \t \t \t #footer .cp{
\t \t \t \t \t \t \t margin-top:11px;
\t \t \t \t \t \t \t }
\t \t \t \t \t \t ul.social{
\t \t \t \t \t \t \t list-style:none;
\t \t \t \t \t \t \t margin:10px 0 0;
\t \t \t \t \t \t \t padding:0;
\t \t \t \t \t \t \t display:inline-block;
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.social>li{
\t \t \t \t \t \t \t display:inline-block;
\t \t \t \t \t \t \t margin:0 5px;
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.social>li>a{
\t \t \t \t \t \t \t font-size:24px;
\t \t \t \t \t \t \t color:#666;
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.social>li>a:hover{
\t \t \t \t \t \t \t color:#999;
\t \t \t \t \t \t }.box-border{
\t \t \t \t \t \t \t padding:15px;
\t \t \t \t \t \t }.accordion-group{
\t \t \t \t \t \t \t background-color:#fff;
\t \t \t \t \t \t \t border-top:1px solid #f0f0f0;
\t \t \t \t \t \t }.accordion-heading .accordion-toggle{
\t \t \t \t \t \t color:#666;
\t \t \t \t \t \t font-weight:700;
\t \t \t \t \t \t }
\t \t \t \t \t \t .accordion-inner{border-top:0}
\t \t \t \t \t \t .blog .blog-item h2{margin-top:0}
\t \t \t \t \t \t .blog .blog-item .date span{display:block;text-align:center}
\t \t \t \t \t \t .blog .blog-item .date span.day{
\t \t \t \t \t \t \t font-size:50px;
\t \t \t \t \t \t \t line-height:50px;
\t \t \t \t \t \t \t padding-top:10px;
\t \t \t \t \t \t \t font-family:"Fjalla One",sans-serif;
\t \t \t \t \t \t }
\t \t \t \t \t \t .blog .blog-item .date span.month{font-size:18px}
\t \t \t \t \t \t .blog .blog-item .tag{margin-top:5px}
\t \t \t \t \t \t .blog .blog-item .avatar{margin-top:5px}
\t \t \t \t \t \t select,textarea,input[type="text"],
\t \t \t \t \t \t input[type="password"],
\t \t \t \t \t \t input[type="datetime"],
\t \t \t \t \t \t input[type="datetime-local"],
\t \t \t \t \t \t input[type="date"],
\t \t \t \t \t \t input[type="month"],
\t \t \t \t \t \t input[type="time"],
\t \t \t \t \t \t input[type="week"],
\t \t \t \t \t \t input[type="number"],
\t \t \t \t \t \t input[type="email"],
\t \t \t \t \t \t input[type="url"],
\t \t \t \t \t \t input[type="search"],
\t \t \t \t \t \t input[type="tel"],
\t \t \t \t \t \t input[type="color"],
\t \t \t \t \t \t .uneditable-input{-webkit-border-radius:3px;
\t \t \t \t \t \t \t -moz-border-radius:3px;
\t \t \t \t \t \t \t border-radius:3px;
\t \t \t \t \t \t \t -webkit-box-shadow:none;
\t \t \t \t \t \t \t -moz-box-shadow:none;
\t \t \t \t \t \t \t box-shadow:none;
\t \t \t \t \t \t \t min-height:50px;
\t \t \t \t \t \t \t padding:0 15px;
\t \t \t \t \t \t \t border:3px solid #ededed
\t \t \t \t \t \t }
\t \t \t \t \t \t select:focus,textarea:focus,
\t \t \t \t \t \t input[type="text"]:focus,
\t \t \t \t \t \t input[type="password"]:focus,
\t \t \t \t \t \t input[type="datetime"]:focus,
\t \t \t \t \t \t input[type="datetime-local"]:focus,
\t \t \t \t \t \t input[type="date"]:focus,
\t \t \t \t \t \t input[type="month"]:focus,
\t \t \t \t \t \t input[type="time"]:focus,
\t \t \t \t \t \t input[type="week"]:focus,
\t \t \t \t \t \t input[type="number"]:focus,
\t \t \t \t \t \t input[type="email"]:focus,
\t \t \t \t \t \t input[type="url"]:focus,
\t \t \t \t \t \t input[type="search"]:focus,
\t \t \t \t \t \t input[type="tel"]:focus,
\t \t \t \t \t \t input[type="color"]:focus,
\t \t \t \t \t \t .uneditable-input:focus{
\t \t \t \t \t \t \t border-color:#2dcc70;
\t \t \t \t \t \t \t -webkit-box-shadow:none;
\t \t \t \t \t \t \t -moz-box-shadow:none;
\t \t \t \t \t \t \t box-shadow:none;
\t \t \t \t \t \t }
\t \t \t \t \t \t .input-block-level{
\t \t \t \t \t \t \t min-height:50px;
\t \t \t \t \t \t }
\t \t \t \t \t \t textarea#message{
\t \t \t \t \t \t \t padding:10px 15px;
\t \t \t \t \t \t \t height:305px;
\t \t \t \t \t \t }
\t \t \t \t \t \t .widget{
\t \t \t \t \t \t \t margin-bottom:30px;
\t \t \t \t \t \t }
\t \t \t \t \t \t .widget>h3{
\t \t \t \t \t \t \t font-size:16px;
\t \t \t \t \t \t \t margin-top:0;
\t \t \t \t \t \t }
\t \t \t \t \t \t .widget h5{
\t \t \t \t \t \t \t margin-top:10px;
\t \t \t \t \t \t }.widget .date{
\t \t \t \t \t \t \t margin-top:5px;
\t \t \t \t \t \t \t padding:8px 10px;
\t \t \t \t \t \t \t background:#2dcc70;
\t \t \t \t \t \t }.widget .date>span{
\t \t \t \t \t \t \t display:block;
\t \t \t \t \t \t \t text-align:center;
\t \t \t \t \t \t \t font-family:"Fjalla One";
\t \t \t \t \t \t \t color:#fff;
\t \t \t \t \t \t }.widget .date>span.month{
\t \t \t \t \t \t \t font-size:14px;
\t \t \t \t \t \t \t line-height:14px;
\t \t \t \t \t \t \t font-weight:700;
\t \t \t \t \t \t \t text-transform:uppercase;
\t \t \t \t \t \t }.widget .date>span.day{
\t \t \t \t \t \t \t font-size:18px;
\t \t \t \t \t \t \t line-height:18px;
\t \t \t \t \t \t }#pricing-table{
\t \t \t \t \t \t \t margin-top:20px;
\t \t \t \t \t \t \t margin-bottom:30px;
\t \t \t \t \t \t }#pricing-table .plan{
\t \t \t \t \t \t \t list-style:none;
\t \t \t \t \t \t \t margin:0;
\t \t \t \t \t \t \t padding:0;
\t \t \t \t \t \t \t color:#fff;
\t \t \t \t \t \t }#pricing-table .plan.featured{
\t \t \t \t \t \t \t -webkit-transform:scale(1.1);
\t \t \t \t \t \t \t -moz-transform:scale(1.1);
\t \t \t \t \t \t \t -ms-transform:scale(1.1);
\t \t \t \t \t \t \t -o-transform:scale(1.1);
\t \t \t \t \t \t \t transform:scale(1.1);
\t \t \t \t \t \t }
\t \t \t \t \t \t #pricing-table .plan>li{padding:10px 15px}
\t \t \t \t \t \t #pricing-table .plan>li.plan-name{background:rgba(0,0,0,0.1)}
\t \t \t \t \t \t #pricing-table .plan>li.plan-name h3{margin:10px 0}
\t \t \t \t \t \t #pricing-table .plan>li.plan-action{padding:20px 0}
\t \t \t \t \t \t #pricing-table .plan1{background:#1abc9c}
\t \t \t \t \t \t #pricing-table .plan2{background:#e74c3c}
\t \t \t \t \t \t #pricing-table .plan3{background:#3498db}
\t \t \t \t \t \t #pricing-table .plan4{background:#9b59b6}
\t \t \t \t \t \t ul.gallery{display:block;margin:-15px}
\t \t \t \t \t \t ul.gallery.col-1 li{width:100%}
\t \t \t \t \t \t ul.gallery.col-2 li{width:50%}
\t \t \t \t \t \t ul.gallery.col-3 li{width:33.3333%}
\t \t \t \t \t \t ul.gallery.col-4 li{width:25%}
\t \t \t \t \t \t ul.gallery li{display:block;padding:0;margin:0;float:left}
\t \t \t \t \t \t ul.gallery li .desc{margin:15px}
\t \t \t \t \t \t ul.gallery li .preview{margin:15px;display:block;position:relative}
\t \t \t \t \t \t ul.gallery li .preview .overlay{
\t \t \t \t \t \t \t width:100%;
\t \t \t \t \t \t \t height:100%;
\t \t \t \t \t \t \t position:absolute;
\t \t \t \t \t \t \t left:0;top:0;
\t \t \t \t \t \t \t background:rgba(0,0,0,0.6);
\t \t \t \t \t \t \t opacity:0;
\t \t \t \t \t \t \t filter:alpha(opacity=0);
\t \t \t \t \t \t \t -webkit-transition:opacity 300ms;
\t \t \t \t \t \t \t -moz-transition:opacity 300ms;
\t \t \t \t \t \t \t -o-transition:opacity 300ms;
\t \t \t \t \t \t \t transition:opacity 300ms;
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.gallery li .preview modal-bodyinks{
\t \t \t \t \t \t \t width:104px;
\t \t \t \t \t \t \t height:40px;
\t \t \t \t \t \t \t position:absolute;
\t \t \t \t \t \t \t top:50%;
\t \t \t \t \t \t \t left:50%;
\t \t \t \t \t \t \t margin-top:-20px;
\t \t \t \t \t \t \t margin-left:-52px;
\t \t \t \t \t \t \t opacity:0;
\t \t \t \t \t \t \t filter:alpha(opacity=0);
\t \t \t \t \t \t \t -webkit-transform:translate(0,-50px);
\t \t \t \t \t \t \t -moz-transform:translate(0,-50px);
\t \t \t \t \t \t \t -ms-transform:translate(0,-50px);
\t \t \t \t \t \t \t -o-transform:translate(0,-50px);
\t \t \t \t \t \t \t transform:translate(0,-50px);
\t \t \t \t \t \t \t -webkit-transition:300ms;
\t \t \t \t \t \t \t -moz-transition:300ms;
\t \t \t \t \t \t \t -o-transition:300ms;
\t \t \t \t \t \t \t transition:300ms
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.gallery li .preview .links>a{
\t \t \t \t \t \t \t width:50px;
\t \t \t \t \t \t \t height:40px;
\t \t \t \t \t \t \t line-height:40px;
\t \t \t \t \t \t \t display:inline-block;
\t \t \t \t \t \t \t text-align:center;
\t \t \t \t \t \t \t background:#2dcc70;
\t \t \t \t \t \t \t color:#fff;
\t \t \t \t \t \t \t text-shadow:0 1px rgba(0,0,0,0.3);
\t \t \t \t \t \t \t font-size:18px;
\t \t \t \t \t \t \t margin:0 1px;
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.gallery li .preview:hover .overlay,ul.gallery li .preview:hover .links{
\t \t \t \t \t \t \t opacity:1;
\t \t \t \t \t \t \t filter:alpha(opacity=100)
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.gallery li .preview:hover .links{
\t \t \t \t \t \t \t -webkit-transform:translate(0,0);
\t \t \t \t \t \t \t -moz-transform:translate(0,0);
\t \t \t \t \t \t \t -ms-transform:translate(0,0);
\t \t \t \t \t \t \t -o-transform:translate(0,0);
\t \t \t \t \t \t \t transform:translate(0,0);
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.faq{
\t \t \t \t \t \t \t list-style:none;
\t \t \t \t \t \t \t margin:0;
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.faq li{
\t \t \t \t \t \t \t margin-top:30px;
\t \t \t \t \t \t }
\t \t \t \t \t \t ul.faq li:first-child{margin-top:0}
\t \t \t \t \t \t ul.faq li span.number{
\t \t \t \t \t \t \t display:block;
\t \t \t \t \t \t \t float:left;
\t \t \t \t \t \t \t width:50px;
\t \t \t \t \t \t \t height:50px;
\t \t \t \t \t \t \t line-height:50px;
\t \t \t \t \t \t \t text-align:center;
\t \t \t \t \t \t \t background:#bb0300;
\t \t \t \t \t \t \t color:#fff;font-size:24px;
\t \t \t \t \t \t }ul.faq li>div{margin-left:70px}ul.faq li>div h3{margin-top:0}#error{text-align:center;margin-top:150px;margin-bottom:150px}
\t \t #mapSection, #carouselSection{border-top:0px solid #BB0000; border-bottom: 0px; background: #bb0300; color:#fff}
\t \t .container1{width:1170px; margin-right:0px; }
\t \t .input-block-level1{
\t display:block;
\t width:100%;
\t min-height:30px;
\t -webkit-box-sizing:border-box;
\t -moz-box-sizing:border-box;
\t box-sizing:border-box
\t }
\t \t .input-block-level1{min-height:50px}textarea#message1 { padding:10px 15px; height:220px}
！ –
おそらく、固定幅のセットを持つ子要素、またはデフォルトが320pxより広い要素があります（テーブルはこれに対して悪名高い犯罪者です）。私たちが見ることができるように、作業中のスニペットを見続けるか、投稿してください。 –
私はそれを投稿しました。ありがとうございました。 – Max