HP作成でナビゲーションとその上の要素の重なりをなくしたい。

HP作成をしていてレスポンシブで画面を小さくしていくとナビゲーションとその上の要素に重なりが出てしまいます。
重なってしまう原因として考えられるものがわかりませんでした。marginやpadding以外で重なりを起こさない方法があれば教えていただけるとありがたいです。
よろしくお願いいたします。

<html>
<head>
<meta charset="utf-8">
<title>DENTALCLINIC</title>
	<meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Paytone+One&display=swap" rel="stylesheet">
        <link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">
        <link href="https://use.fontawesome.com/releases/v5.11.1/css/all.css" rel="stylesheet">
        <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
        <link href="css/lightbox.css" rel="stylesheet">
        <link href="style.css" rel="stylesheet" type="text/css">
        <link href="lightbox.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="lightbox.js"></script>
        <script>
  
       (function(d) {
        var config = {
          kitId: 'czz6dtd',
          scriptTimeout: 3000,
          async: true
        },
        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-　inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
      })(document);    
       lightbox.option({
      'resizeDuration': 1200,
      'wrapAround': true,
      "maxWidth":700,
    })     
    </script>   
</head>

<body>
		<div class="box1">
            
			<img class="headerimg" src="images/dental-header_01.jpg" alt="">
            
            <div class="box1_inner">
			<div class="a-container">
			
            <div class="header-title">
			<!--<img class="headerimg" src="images/dental-header_01.jpg" alt="">-->
            <h1 id="home"><a href="#">歯科医院<br><span> DENTAL CLINIC</span></a></h1>
            </div>
                
                <div class="header_info">
                    
						<a href="tel:●●●"><i class="fas fa-phone-alt"></i>●●●</a><br>
					<p><i class="fas fa-asterisk"></i>●●●<i class="fas fa-asterisk"></i></p>
						<div class="h-container">
						<div class="info-h1">
			<dl>
			<dt class="timec"><i class="fas fa-caret-left"></i>診察時間<i class="fas fa-caret-right"></i></dt> 
                              
                           <dd>平日</dd>
				<p class="infotime">
					AM 9:30~13:00</p>
				<p class="infotime">
										
					PM15:00~19:00</p>
                                 <dd>土曜</dd><p class="infotime">AM9:30~13:00</p>
							</dl>
                          </div>
								
			<div class="info-h2">
				<dl>
				<dt class="timec"><i class="fas fa-caret-left"></i>休診<i class="fas fa-caret-right"></i></dt>
								<p class="day">土曜午後と日曜・祝祭日</p>
				</dl>
			</div>
                    
                </div>
			 </div>
            </div>
	</div>
            
<nav class="menu">
                <ul>
                    <li><a href="#home">ホーム<br><span>Home</span></a></li>
					<li><a href="#intro">院長紹介<br><span>Introdaction</span></a></li>
                    <li><a href="#contact">お問い合わせ<br><span>Contact</span></a></li>
                    <li><a href="#access">アクセス<br><span>Access</span></a></li>
                    <li><a href="#medical">診療について<br><span>Medical</span></a></li>
                    <li><a href="#opentime">診察時間<br><span>Consultation</span></a></li>
                </ul>
            </nav>
          
           </div>
	
			
コード

css


/* ========================================
    リセットcss
========================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style:normal;
    font-weight: normal;
    font-size: 100%;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
html{overflow-y: scroll;
font-size: 62.5%;
}

blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
input, textarea{margin: 0; padding: 0;}
ol, ul{list-style:none;}
table{border-collapse: collapse; border-spacing:0;}

a:focus {outline:none;}

div#test {
    text-align: center;
    position: absolute;
    top: 0;
    opacity: 0.5;
}

/* micro clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {clear: both;}
.cf {*zoom: 1;}


/* フォント */

body{
    margin: 0;
    padding: 0;
    font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
    color: #000000;
    width: auto;
    height: auto;
	font-size: 1.6rem;
	overflow: hidden;
}



/* 左右の余白 */

.box1_inner,.box2,.box6_inner,.box7{
    padding-left: 50px;
    padding-right: 50px;
    margin: 0 auto;
}


.box1_inner,.box2,.box3,.box4,.box5,.box6,.box7{
    vertical-align: bottom;
    clear: both;
}


/* ヘッダー */
/* ヘッダー画像 */


.headerimg{
    width: 100%;
    height: 10vw;
    display: block;
    margin: auto;
    right: 0;
    left: 0;
}


 h1 a{
    font-size: 45px;
    text-decoration: none;
    color: #333232;
    font-weight: 600;
	display: inline-block;
}

h1 a span{
    font-size: 25px;
	display: block;
	text-align: center;
}

/* ヘッダー画像とテキストを重ねる */
.hederimg{
    position: relative;
}

h1 {
    position: absolute;
    top: 2%;
    width: 100%;
}

/*.menu ul{
    position: absolute;
    right: 8%;
}*/

/* お問い合わせの設定 */


.header_info a{
	font-size: 35px;
    text-decoration: none;
    color: #000000;
    padding-top: 10px;
	text-align: center;
	white-space: nowrap;
	}

.fa-asterisk{
	color: #539335;
	opacity: 0.6;}


.header_info p{
	white-space: nowrap;
}

.h-container{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-items: stretch;
}

.info-h1{
	display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
	text-align: left;
}

.info-h2{
	display: flex;
    justify-content: center;
    display: block;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: left;
}

.timec{
	font-size: 14px;
	margin-bottom: 0;
	line-height: 1.5;
}

.fa-caret-left,.fa-caret-right{
	padding: 3px;
	color: #539335;
	opacity: 0.6;
	
}

.info-h dd{
	font-size: 18px;
	margin-top: 0;
	line-height: 1.2;
}

.day{
		white-space: nowrap;
	}

/* お問い合わせをヘッダー画像に重ねる*/
.header_info{
    position: absolute;
    top: 0;
    right: 15%;
    background-color: rgba(255,255,255,0.8);
	text-align: center;
}




/* ナビゲーション */

.menu ul｛
    padding-right: 10%;
    width: auto;
}

.menu ul li a{
    font-size: 25px;
    text-decoration: none;
    padding: 0 10px;
    display: block;
    text-align: center;
    color: #333232;
    font-weight: 600;
}


.menu ul li a:hover{
    color: #eeeeee;
}

.menu ul li a span{
    font-size: 15px;
    display: block;
}

.box1:after{
    content: "";
    display: block;
    clear: both;
}

h1{
    float: left;
}
/* ナビゲーションを横に並べる */


.menu li{
    float: left;
    width: auto;
}

コード

m.ts10806

2020/06/25 20:59

fontawesomeを幾つも呼んでいるのはどういう意図があるのでしょう。

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

回答1件

ベストアンサー

レスポンシブコーディングをする必要があると思います。

レスポンシブWebデザインとは？メリットとデメリット、作り方まで紹介！
https://digitalidentity.co.jp/blog/creative/responsive-web-design.html

例えば横幅300pxの要素と横幅600pxの要素を、
iPhone Xの画面幅375pxに表示することは物理的に不可能で、はみ出るか重なるかしてしまいます。

そのためおおざっぱに、横並びのリスト (ul li) は縦に並べるようにしたり、
左右に配置しているコンテンツは、やはり縦に並べるようにしたりする必要があります。

どのように実装すればいいかわからない場合は
以下の記述を、CSSファイルの末尾に追加してみて、画面幅を小さくしていってください。

CSS
1/* 画面幅1000px以下のとき */
2@media screen and (max-width: 1000px) {
3  body {
4    background: red; /* 画面幅が1000px以下のとき背景色が赤色になる */
5  }
6  .headerimg {
7    /* height: 10vw; */
8    height: 200px; /* 例) 画面幅が狭いと「vw」は小さくなるので、固定値にしたり、30vwなど数値を大きくする */
9  }
10  .header_info {
11    right: 0; /* 例) 画面幅が狭いときに横方向の余白を小さくする */
12  }
13}
14
15/* 画面幅768px以下のとき */
16@media screen and (max-width: 768px) {
17  body {
18    background: yellow; /* 画面幅が768px以下のとき背景色が黄色になる */
19  }
20  .header_info {
21    position: static; /* 例) 画面幅が狭いときに、横並び配置をやめて縦並びにする */
22  }
23}