背景色をそのままにCSSのスライドショーの画像を中央寄せにしたい。

下記はCSSだけで作ったスライドショーです。
スライドショーの画像の下に背景色として要素全体に赤色をつけたのです。
（北朝鮮っぽいサイトになってますがただのネタです。）

<html>

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main_style.css">
<link rel="stylesheet" type="text/css" href="css/index_style.css">
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
<header>
  <nav class="clearfix"> 
    
    <!-- logo -->
    <div class="logo">
      <h1><a href="index.html"><span>株式会社DPRK</span></a></h1>
    </div>
    <!-- logo -->
    
    <ul>
      <li class="menu01"><a href="#">ホーム<br>
        <span>HOME</span></a></li>
      <li class="menu02"><a href="#">会社概要<br>
        <span>COMOPANY</span></a></li>
      <li class="menu03"><a href="#">事業内容<br>
        <span>WORKS</span></a></li>
      <li class="menu04"><a href="#">ニュース<br>
        <span>NEWS</span></a></li>
      <li class="menu05"><a href="#">採用情報<br>
        <span>RECRUIT</span></a></li>
      <li class="menu06"><a href="#">お問い合わせ<br>
        <span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>

<section> 
  
  <!-- silde -->
  <div class="slide">
  	<img src="img/slideshow/slide1_nkflag.jpg" width="1280" height="600" alt="北朝鮮国旗">
    <img src="img/slideshow/slide2_3kim.jpg" width="1280" height="600" alt="金日成・金正日・金正恩">
    <img src="img/slideshow/slide3_juche.jpg" width="1280" height="600" alt="チュチェ思想塔">
    <img src="img/slideshow/silde4_pyongyang.jpg" width="1280" height="600" alt="平壌">
    <img src="img/slideshow/silde5_parade.jpg" width="1280" height="600" alt="軍事パレード">
  </div>
  <!-- silde --> 
  
</section>

<section>

	<!-- company_dscription -->
    <div id="company_discription">
    	<p>”人間が全ての事の主人であり、全てを決める”</p>
    </div>
    <!-- company_dscription -->

</section>

</body>
</html>

<CSS>

@charset "UTF-8";
/* CSS Document */

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */

/* -------------------------------------------- */
/* ▼PC用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media all and (min-width: 608px) {
	
* {
	margin:0;
	padding:0;
}

body {
	color:#333;
	margin: 0;
}
a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

h1 {
  	width:250px;
  	height:60px;
  	background-image:url("../img/logo.png");
  	background-repeat:no-repeat;
	
}

h1 span {
	display:none;
}

h1 a {
	display:block;
  	width:210px;
  	height:60x;
}

.logo {
	float:left;
	width:250px;
	padding-right:20px;
}

nav {
	background-color:#fff;
	padding-top:10px;
	display: flex;
	justify-content: center;
	height: 82px; /* 高さ */
  	width: 100%; /* 長さ */
  	position: fixed; /* ヘッダーを固定(これが重要) */
  	top: 0; /* 固定する位置 */
	left: 0; /* 固定する位置 */
  	right: 0;  /* 固定する位置 */
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
}

nav li {
	list-style:none;
	float:left;
	text-align:center;
	overflow: hidden;
	
}

nav .menu01, .menu02, .menu03, .menu04, .menu05, .menu06 {
	width:125px;
	background-color:#FFF;
	font-weight:bold;
}

nav .menu02, .menu03, .menu04, .menu05, .menu06 {
	border-left: solid 1px #CCC;
	-moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   
}

nav a {
	width:100%;
	display:block;
}

nav span {
	
	color:#CCC;
	font-weight:100;
	line-height:3em;
}

nav a:link { color: #333; }
nav a:visited { color: #333; }
nav a:hover { color: #333; }
nav a:active { color: #333; }

a {
	text-decoration:none;
}

.clearfix {
 *zoom: 1;
}
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

}

@media all and (min-width: 608px) {
	
/*スライダー*/

/*=== 画像の表示エリア ================================= */
.slide {
	position : relative;
	overflow : hidden;
	top:93px;
	/* 画像のサイズに合わせて変更ください */
  	width : 100%;
	height : 600px;
	margin : auto;      /* 中央寄せ */
	background-color:#eb3328;
	z-index:-2;
}

/*=== 画像の設定 ======================================= */
.slide img {
	display : block;
	position : absolute;
	/* 画像のサイズを表示エリアに合せる */
  	width : 1280px;
	height : inherit;
	left: 100%;
	animation : slideAnime 15s ease infinite;
	z-index: -1;
}

/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) {
	animation-delay: 0s
}
.slide img:nth-of-type(2) {
	animation-delay: 3s
}
.slide img:nth-of-type(3) {
	animation-delay: 6s
}
.slide img:nth-of-type(4) {
	animation-delay: 9s
}
.slide img:nth-of-type(5) {
	animation-delay: 12s
}

 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
 0% {
left: 100%
}
 1% {
left: 0
}
 19% {
left: 0
}
 20% {
left: -100%
}
 100% {
left: -100%
}
}

#main_slide {
	z-index:-2;
}

#company_discription {
	margin-top:93px;
	width:100%;
	background-image:url(../img/sc2_nk_flag_bg.jpg),url(../img/sc2_nk_flag_bg_1px.jpg);
	background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	repeat; /* 再背面の背景レイヤーに対応 */
	display: block;
  	height: 150px;
  	display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
	
}

#company_discription p {
	text-align:center;
	color:#faee00;
	font-size:36px;
	font-weight:bold;
}

}

そして、下記のwidth:の部分が最初は画像サイズの1280pxだったのですが、そこをwidth:100%にすることで、
赤が要素全体に表示されるようになりました。
しかし、そうすると中央にあった画像が左によってしまいました。

/*=== 画像の表示エリア ================================= */
.slide {
	position : relative;
	overflow : hidden;
	top:93px;
	/* 画像のサイズに合わせて変更ください */
  	width : 100%;/* width:1280px;だった箇所 */
	height : 600px;
	margin : auto;      /* 中央寄せ */
	background-color:#eb3328;
	z-index:-2;
}

要素全体の背景色を赤にして画像を中央寄せする方法はありますでしょうか？

「試したこと」
.sliderのクラスの中を


/*=== 画像の表示エリア ================================= */
.slide {
	position : relative;
	overflow : hidden;
	top:93px;
	/* 画像のサイズに合わせて変更ください */
  	width : 100%;
	height : 600px;
	margin : auto;      /* 中央寄せ */
	background-color:#eb3328;
	z-index:-2;
　　　display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
}

としてみたが変化はなかった。

imgの部分を

/*=== 画像の設定 ======================================= */
.slide img {
	display : block;
	position : absolute;
	/* 画像のサイズを表示エリアに合せる */
  	width : 1280px;
	height : inherit;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	animation : slideAnime 15s ease infinite;
	z-index: -1;
}

としてみたが、下記のようになって変な表示になってしまった。

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょう。

CSS
1body > section {
2    width : 100%;
3}

投稿2018/03/10 12:28

kei344

総合スコア69400

退会済みユーザー

2018/03/10 13:38

ありがとうございます。追加してみましたが変化はありませんでした。 sectionだと他のsectionにも影響してしまうと思い、classを付けてみましたがそれでもダメでした。こちらでも色々と解決方法を探ってみます。

kei344

2018/03/10 14:12

body > section { background-color:#eb3328;width : 100%; } こうかな。

退会済みユーザー

2018/03/10 14:53 編集

ありがとうございます。 body > section { background-color:#eb3328; width : 100%; } /*=== 画像の表示エリア ================================= */ .slide { position : relative; overflow : hidden; top:93px; /* 画像のサイズに合わせて変更ください */ width : 1280px; height : 600px; margin : auto; /* 中央寄せ */ z-index:-1; } このようにしてみましたところ、画像は中央によりましたが背景にくるはずの赤が最上部に来てしまいましたし、下部90pxくらい隙間が空いてしまいました。

kei344

2018/03/10 14:52

当該 section に背景色を付ける .slide と .slide img の z-index 削除 nav に z-index:1; .slide の top: 93px; を margin-top: 93px; にする .slide の width を 1280px https://jsfiddle.net/ak44ju12/2/ https://jsfiddle.net/ak44ju12/2/show/ アドバイス：z-indexは必要最低限しか使わないようにしましょう。特にマイナスの値が必要な場合は設計に問題があると思ってください。

退会済みユーザー

2018/03/10 15:08

わざわざ作って頂きありがとうございます。おっしゃる通りにやりましたところ、うまくいきました。navにz-indexは考えもつきませんでした。z-indexは最小限がいいんですね。特にマイナスは問題があると。承知しました。今は <div id="company_discription"> <p>”人間が全ての事の主人であり、全てを決める”</p> </div> この部分とスライドショーの間に93pxの隙間があいてしまったのでそこを修正しようと思います。ありがとうございました。

kei344

2018/03/10 15:13

#company_discription { margin-top: 93px;/* ← ここで指定している*/

退会済みユーザー

2018/03/10 15:18

すいません。伝え忘れていました。先ほどの回答の直後にその部分削除したのですが、変わらないのでクロームの検証を使って調べています。

退会済みユーザー

2018/03/10 15:21

すいません。body > sectionこちらにmargin-top:93pxをつけていたのが原因でした。

kei344

2018/03/10 15:21

https://jsfiddle.net/ak44ju12/3/ https://jsfiddle.net/ak44ju12/3/show/