申し訳ありませんが、悪い英語の私はgoogle translateを使用しています！フレックスボックスを使用したウェブサイトのレイアウト
フレックスボックス - codepen.io/anon/pen/zPwjRpを使用してサイトを作成しました。 700ピクセル未満の幅のサイトに適用された@media。それはすべての権利だ、しかし、すぐにウィンドウの幅が未満717px以下の問題になると表示されます：
男の子&女の子、助けてください！
問題1と3は、左右の余白のために発生します。 以下の完全なコードをチェックし、お使いのメディアクエリにこの
.content-wrapper {
width: 100%;
margin-left: 0;
margin-right: 0;
を追加します。ヘルプ（「理由はない、または、このコードを作成する方法を模索
body {
background: #111;
font: 15px Tahoma;
color: #00C8FF;
}
#header {
display: flex;
justify-content: center;
height: 150px;
background: #263238;
}
#header h3 {
margin: 0;
align-self: center;
}
/* Глобальный блок обертка */
#wrapper {
width: 100%;
display: flex;
justify-content: space-between;
margin: 10px auto 0 auto;
}
/* Все сайдбары фиксированной ширины */
.sidebar {
width: 202px;
min-width: 202px;
}
/* У первых сайдбаров убираем отступ */
.sidebar-item:first-child {
margin-top: 0;
}
/* У остальных делаем отступ друг от друга */
.sidebar-item {
margin-top: 10px;
}
/* Верхний и нижний фон сайдбара идентичного цвета и одинаковой высоты */
.sitem-top-bg,
.sitem-bottom-bg {
height: 84px;
background: #3e2723;
}
/* Средний фон с выравниванием текста по центру */
.sitem-middle-bg {
background: #5d4037;
text-align: center;
}
/* Обертка основного содержимого */
.content-wrapper {
width: 68%;
margin-left: 10px;
margin-right: 10px;
}
/* Выстраиваем в одну линию несколько верхних фонов и поровну делим расстояние между блоками */
.cw-top-bg {
display: flex;
justify-content: space-between;
}
/* Все верхние фоны имеют идентичную высоту */
.cw-top-bg-left,
.cw-top-bg-middle,
.cw-top-bg-right {
height: 40px;
}
/* Верхний левый и правый блок с минимальной шириной */
.cw-top-bg-left,
.cw-top-bg-right {
min-width: 134px;
background: #212121;
}
/* Верхний средний фон */
.cw-top-bg-middle {
width: 100%;
background: #424242;
}
/* Выстраиваем все средние и нижние блоки основного содержимого в линию */
.cw-middle-bg,
.cw-bottom-bg {
display: flex;
justify-content: space-between;
}
/* Боковые полосы */
.cw-middle-bg-left,
.cw-middle-bg-right {
width: 30px;
min-width: 30px;
background: #607d8b;
}
/* Средний фон с основным содержимым */
.cw-middle-bg-center {
color: #137DE6;
padding: 10px;
background: rgba(29, 26, 26, 0.64);
}
.cw-bottom-bg-left,
.cw-bottom-bg-right {
width: 68px;
min-width: 68px;
height: 35px;
background: #382f2f;
}
.cw-bottom-bg-middle {
height: 35px;
width: 100%;
background: #222;
}
@media (max-width: 700px) {
#wrapper {
flex-direction: column;
}
.sidebar {
align-self: center;
}
.content-wrapper {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}<div id="header">
<h3>Шапка с логотипом</h3>
</div>
<div id="wrapper">
<!-- Обертка для сайдбаров !-->
<div class="sidebar">
<!-- Обертка для отдельных блоков сайдбаров !-->
<div class="sidebar-item">
<!-- Верхний фон сайдбара !-->
<div class="sitem-top-bg"></div>
<!-- Средний фон сайдбара!-->
<div class="sitem-middle-bg">
Какое нибудь содержимое
</div>
<!-- Нижний фон сайдбара !-->
<div class="sitem-bottom-bg"></div>
</div>
<!-- Обертка для отдельных блоков сайдбаров !-->
<div class="sidebar-item">
<!-- Верхний фон сайдбара !-->
<div class="sitem-top-bg"></div>
<!-- Средний фон сайдбара!-->
<div class="sitem-middle-bg">
Какое нибудь содержимое
</div>
<!-- Нижний фон сайдбара !-->
<div class="sitem-bottom-bg"></div>
</div>
<!-- Обертка для отдельных блоков сайдбаров !-->
<div class="sidebar-item">
<!-- Верхний фон сайдбара !-->
<div class="sitem-top-bg"></div>
<!-- Средний фон сайдбара!-->
<div class="sitem-middle-bg">
Какое нибудь содержимое
</div>
<!-- Нижний фон сайдбара !-->
<div class="sitem-bottom-bg"></div>
</div>
</div>
<!-- Обертка основного содержимого !-->
<div class="content-wrapper">
<div class="cw-top-bg">
<div class="cw-top-bg-left"></div>
<div class="cw-top-bg-middle"></div>
<div class="cw-top-bg-right"></div>
</div>
<div class="cw-middle-bg">
<div class="cw-middle-bg-left"></div>
<div class="cw-middle-bg-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at dui mattis, convallis justo nec, auctor augue. Nulla vel lacinia nisi. Duis nec dolor nibh. Pellentesque elementum urna nec viverra venenatis. Aenean commodo pellentesque ante.
Nullam quis mi egestas, volutpat ipsum sed, hendrerit diam. Fusce ut ligula a magna molestie feugiat sed at quam. Maecenas porta, metus sed sodales molestie, ex lacus porttitor nisl, vel lobortis sem tellus vel risus. Phasellus erat massa, scelerisque
id augue vel, volutpat lacinia lectus. Etiam efficitur, purus vitae ultricies ultricies, massa est vestibulum nisi, eu tincidunt diam velit id diam. Duis elementum tristique pellentesque. Nunc erat tortor, convallis sed sodales a, luctus quis
nunc.
</div>
<div class="cw-middle-bg-right"></div>
</div>
<div class="cw-bottom-bg">
<div class="cw-bottom-bg-left"></div>
<div class="cw-bottom-bg-middle"></div>
<div class="cw-bottom-bg-right"></div>
</div>
</div>
<!-- Обертка для сайдбаров !-->
<div class="sidebar">
<!-- Обертка для отдельных блоков сайдбаров !-->
<div class="sidebar-item">
<!-- Верхний фон сайдбара !-->
<div class="sitem-top-bg"></div>
<!-- Средний фон сайдбара!-->
<div class="sitem-middle-bg">
Какое нибудь содержимое
</div>
<!-- Нижний фон сайдбара !-->
<div class="sitem-bottom-bg"></div>
</div>
<!-- Обертка для отдельных блоков сайдбаров !-->
<div class="sidebar-item">
<!-- Верхний фон сайдбара !-->
<div class="sitem-top-bg"></div>
<!-- Средний фон сайдбара!-->
<div class="sitem-middle-bg">
Какое нибудь содержимое
</div>
<!-- Нижний фон сайдбара !-->
<div class="sitem-bottom-bg"></div>
</div>
<!-- Обертка для отдельных блоков сайдбаров !-->
<div class="sidebar-item">
<!-- Верхний фон сайдбара !-->
<div class="sitem-top-bg"></div>
<!-- Средний фон сайдбара!-->
<div class="sitem-middle-bg">
Какое нибудь содержимое
</div>
<!-- Нижний фон сайдбара !-->
<div class="sitem-bottom-bg"></div>
</div>
</div>
</div>
質問）は、必要な動作、_固有の問題またはエラー、およびそれを再現するのに必要な最短コード**を質問自体に含める必要があります。参照：[最小限で完全で検証可能なサンプルの作成方法]（http://stackoverflow.com/help/mcve） – LGSon