-1
ですから、ビューポートが1200pxを超えると、3つの列レイアウトを中央に配置しようとしていますが、動作させることができません。3列のレイアウトを中央に配置するにはどうすればよいですか？
ありがとうございました！
/*****UNIVERSAL SELECTORS*****/
body {
\t margin: 0;
\t padding: 0;
\t background: linear-gradient(
\t \t \t \t rgba(15,36,0,.5),
\t \t \t \t rgba(15,36,0,.5)
\t \t \t \t),
\t \t \t \t url(img/background.jpg) no-repeat center;
}
ul {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
}
a {
\t text-decoration: none;
\t color: inherit;
}
/*****HEADER SELECTORS*****/
header a img {
\t width: 100px;
\t margin: 10px;
}
header nav {
\t display: inline-block;
\t float: right;
}
header nav ul {
\t margin-top: 30px;
\t z-index: 100;
}
header nav ul li {
\t display: inline;
\t padding: 15px;
\t color: #b3de81;
\t font-family: 'Lato', sans-serif;
}
header nav ul li a {
\t padding: 15px;
}
#menu-icon {
\t margin-top: 30%;
\t height: 40px;
\t width: 40px;
\t display: hidden;
\t background: url(img/hamburger.png);
}
#menu-icon:hover {
\t border-radius: 20%;
}
/********** SLIDER **********/
.slider {
max-width: 940px;
margin: 0px auto 30px auto;}
.slide-viewer {
position: relative; /* needed for IE7 */
overflow: hidden;
height: 430px;
\t padding: 5px;
\t }
.slide-group {
width: 100%;
height: 100%;
position: relative;
}
.slide {
width: 100%;
height: 100%;
display: none;
position: absolute;
box-shadow: inset 5px 5px 100px black,
\t \t \t \t inset -5px -5px 100px black;
}
.slide-1 {
\t background: url(img/slide-1.jpg);
\t background-size: cover;
}
.slide-2 {
\t background: url(img/slide-2.jpg);
\t background-size: cover;
}
.slide-3 {
\t background: url(img/slide-3.jpg);
\t background-size: cover;
}
.slide-4 {
\t background: url(img/slide-4.jpg);
\t background-size: cover;
}
.slide:first-child {
display: block;
}
/********** BUTTONS **********/
.slide-buttons {
text-align: center;}
.slide-btn {
border: none;
background: none;
color: #000;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}
/*****BODY*****/
section:nth-of-type(1) {
\t background-color: #fdffff;
}
h1:nth-of-type(1) {
\t background-color: #fdffff;
\t margin: 0;
\t text-align: center;
\t padding: 30px;
\t font-family: 'Lato', sans-serif;
\t color: #004040;
}
.bwrapper {
\t width: 70%;
\t margin: 50px auto 50px auto;
\t background-color: #fdffff;
\t font-family: 'Lato', sans-serif;
\t box-shadow: .1px .1px 2px #b3de81,
\t \t \t \t -.1px -.1px 2px #b3de81;
}
.hwrapper {
\t width: 100%;
}
.twrapper {
\t width: 100%;
\t margin: auto;
\t text-align: center;
}
.col {
\t margin: 5%;
}
/*****MEDIA QUERIES*****/
@media only screen and (min-width: 1200px) {
\t .twrapper {
\t \t overflow: auto;
\t \t margin: 0;
\t \t position: relative;
\t }
\t .col {
\t \t float: left;
\t \t width: 250px;
\t \t margin: 0;
\t }
}
@media only screen and (max-width: 930px) {
\t header nav ul {
\t \t display: none;
\t }
\t #menu-icon {
\t \t display: inline-block;
\t }
\t nav ul,
\t nav ul:active {
\t \t position: absolute;
\t \t padding: 40px;
\t \t background-color: #fdffff;
\t \t right: 10px;
\t \t width: 50%;
\t \t border: solid 1px #265c00;
\t \t box-shadow: 1px 1px 5px black,
\t \t \t \t \t -1px -1px 5px black;
\t }
\t nav li {
\t \t text-align: center;
\t \t width: 100%;
\t \t padding: 10px 0;
\t \t margin: 0;
\t }
\t nav {
\t \t padding: 10px;
\t }
\t nav:hover ul {
\t \t display: block;
\t \t margin: 0px;
\t }
}
@media only screen and (max-width: 435px) {
\t .bwrapper {
\t \t width: 100%;
\t \t margin: auto;
\t }
\t header {
\t \t box-shadow: inset 2px 2px 5px black,
\t \t \t \t \t inset -2px -2px 5px black;
\t }
}<!DOCTYPE html>
\t <html lang="en">
\t \t <head>
\t \t \t <meta name="robots" content="index, follow">
\t \t \t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t \t \t <meta charset="utf-8">
\t \t \t <title>Wylde Snack Foods | A Dedicated Gluten-Free Facility and A Subsidiary Company of Ener-G Foods Inc.</title>
\t \t \t <meta name="Description" content="A dedicated gluten-free facility open to private-label business.">
\t \t \t <meta name="Keywords" content="wylde snack foods, ener-g foods inc">
\t \t \t <link rel="stylesheet" type="text/css" href="normalize.css">
\t \t \t <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
\t \t \t <link rel="stylesheet" type="text/css" href="hover.css">
\t \t \t <link rel="stylesheet" type="text/css" href="main.css">
\t \t </head>
\t \t <body>
\t \t \t <div class="hwrapper">
\t \t \t <header>
\t \t \t \t <a href="#"><img src="img/logo02.png" alt="Wylde Snack Foods logo" class="hvr-buzz"></a>
\t \t \t \t <nav>
\t \t \t \t \t <a href="#" id="menu-icon"></a>
\t \t \t \t \t <ul> \t \t \t \t \t
\t \t \t \t \t \t <li class="hvr-bob"><a href="index.html">Home</a></li> \t \t \t \t \t \t
\t \t \t \t \t \t <li class="hvr-bob"><a href="products/products.html">Products</a></li> \t
\t \t \t \t \t \t <li class="hvr-bob"><a href="contract_mfg/contract_mfg.html">Contract MFG</a></li> \t \t \t \t \t \t
\t \t \t \t \t \t <li class="hvr-bob"><a href="about/about.html">About</a></li>
\t \t \t \t \t \t <li class="hvr-bob"><a href="contact/contact.html">Contact</a></li> \t
\t \t \t \t \t \t <li class="hvr-bob"><a href="http://www.ener-g.com/" target="_blank">Ener-G Foods</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </nav>
\t \t \t </header>
\t \t \t </div>
\t \t \t <div class="bwrapper">
<h1>Some of Our Products</h1>
<section>
<div class="slider">
<div class="slide-viewer">
<div class="slide-group">
<div class="slide slide-1">
</div>
<div class="slide slide-2">
</div>
<div class="slide slide-3">
</div>
<div class="slide slide-4">
</div>
</div>
</div>
<div class="slide-buttons"></div>
</div>
</section>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/slider.js"></script>
\t \t \t <div class="twrapper">
\t \t \t <div class="alignwrap">
\t \t \t \t <div class="col left">
\t \t \t \t \t <h3>Our Products</h3>
\t \t \t \t \t <p>
\t \t \t \t \t \t We are a dedicated gluten-free facility which makes a variety of products. Additionally, we avoid the top allergens listed by FALCPA. Click <a href="products/products.html">here</a> to be redirected to our products page.
\t \t \t \t \t </p>
\t \t \t \t </div>
\t \t \t \t <div class="col center">
\t \t \t \t \t <h3>Our Clients</h3>
\t \t \t \t \t \t We are currently open to private-label business; however, other business inquiries may be accepted. Click <a href="">here </a> to be redirected to our Contract MFG.
\t \t \t \t \t </div>
\t \t \t \t <div class="col right">
\t \t \t \t \t <h3>Our Certification</h3>
\t \t \t \t \t \t We are SQF certified with some of our products being certified as organic. Click <a href="certification/certification.html">here</a> to be redirected to our certifications.
\t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t
\t \t \t <footer>
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="certification/certification.html">Certification</a></li>
\t \t \t \t </ul>
\t \t \t \t <span>©Wylde Snack Foods</span>
\t \t \t </footer>
\t \t \t </div>
\t \t </body>
\t </html>
？私はちょうど1つの白、黒の子を見る – dippas