Javascriptによるレイアウト崩れの対処法

プログラミング初心者です。

ポートフォリオのためにコーディングをしているのですが、
レイアウトの崩れについて悩んでおります。

調べたところ、Footerやpx表記に問題がある可能性があるということで
cssで一部分削ったりvwに変えたり等しましたが、解決には及びませんでした。

↑こちらの画像のメニューバーは、すべてクリック可能なのですが
その中のGalleryをクリックした下の画像は、このようにロゴとメニューが逆に表示され、AboutとGalleryのみクリックできない状態になってしまいます。
Galleryクリック後も、上の画像になるのが理想です。

slick というスライドショーを実現するJavaScriptライブラリを使用しており、スライドショー自体は問題なく機能します。
こちらが参考にしたサイトです。https://coco-factory.jp/ugokuweb/move01/6-1-2/
現在はほぼコピペですが訂正していきます。

レイアウト崩れにおいて、
何が引っ掛かっているのかを明確にするため
コードを試行錯誤していたら

<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-2/css/6-1-2.css">

こちらのコードを削除すると、一枚目の画像のように正常なレイアウトになることがわかりました。
しかし、このコードを削除すると画像が表示されないため、どう対処すればよいかわからない状態です。

他にも問題がある可能性が高いため、それぞれ一部抜粋します。

HTML（Gallery）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AKI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="portfoilo">
<meta name="keywords" content="キーワード１,キーワード２,キーワード３,キーワード４,キーワード５">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-2/css/6-1-2.css">
<script src="gallery1.js"></script>
</head>


<body>

<div id="container">

<header>

<h1 id="logo"><a href="inde3.html"><img src="logo.png" alt="AKI"></a></h1>

<nav id="menubar">
<ul>
<li><a href="inde3.html">Home</a></li>
<li><a href="about2.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="link.html">Link</a></li>
</ul>
</nav>

<ul class="icon">
<li><a href="#"><img src="icon_facebook.png" alt="Facebook"></a></li>
<li><a href="#"><img src="icon_twitter.png" alt="Twitter"></a></li>
<li><a href="#"><img src="icon_instagram.png" alt="Instagram"></a></li>
</ul>

</header>

<div id="contents">

<section class="inner first">

<h2>Gallery</h2>
 
 <body>

<div class="container">
 <p>使用したライブラリ：<a href="https://kenwheeler.github.io/slick/" target="_blank">https://kenwheeler.github.io/slick/</a></p>
 <!--/container-->
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-2/js/6-1-2.js"></script>
</body>
</html>

Java

$('.slider').slick({
    fade:true,//
    autoplay: true,//
    autoplaySpeed: 3000,//
    speed:1000,//
    infinite: true,//
    slidesToShow: 1,//
    slidesToScroll: 1,//
    arrows: true,//
    prevArrow: '<div class="slick-prev"></div>',//
    nextArrow: '<div class="slick-next"></div>',//
    dots: true,//
        pauseOnFocus: false,//
        pauseOnHover: false,//
        pauseOnDotsHover: false,//
});

$('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){
    $('.slider').slick('slickPlay');
});

CSS

header {
    text-align: center;
    position: fixed;
    z-index: 10;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100px;
    background: #333;
    background: rgba(0,0,0,0.7);   
}

header #logo img {
    width: 250px;
    margin-top: 15px; 
}

#menubar {
    position: relative;
    text-align: center;
    font-size: 13px;
    margin-top: 15px;
}

#menubar li {
    display: inline;
}
#menubar li a {
    text-decoration: none;
    color: #fff;
    padding: 0px 10px 5px 13px;
    letter-spacing: 0.2em;
    margin: 0 10px;
}

#menubar li a:hover {
    border-bottom: 3px solid #fff;  /*下線の幅、線種、色*/
}

#menubar-s {display: none;}

#menubar_hdr {display: none;}

footer {
    clear: both;
    text-align: center;
    padding-bottom: 30px;
}
footer a {text-decoration: none;}
footer a:hover {color: #666;}
footer .pr {display: block;}

よろしくお願いします。

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

回答1件

ベストアンサー

https://coco-factory.jp/ugokuweb/move01/6-1-2/ のスライドショー用の CSS が h1 タイプセレクタで書かれているのが原因です。

css
1h1{
2  position: absolute;
3  z-index: 2;
4  top: 50%;
5  left: 50%;
6  transform: translate(-50%, -50%);
7  text-align: center;
8  font-size:6vw;
9  letter-spacing: 0.1em;
10  text-transform: uppercase;
11  color: #fff;
12}

上記のコードを下記のように書き換えてみてください。

css
1.wrapper h1{
2  position: absolute;
3  z-index: 2;
4  top: 50%;
5  left: 50%;
6  transform: translate(-50%, -50%);
7  text-align: center;
8  font-size:6vw;
9  letter-spacing: 0.1em;
10  text-transform: uppercase;
11  color: #fff;
12}