我已经创建了网站并在谷歌开发者工具中进行了检查，该网站在我的电脑上看起来都很棒，并且对较小的窗口大小反应良好。
当我将网站上传到主机时，该网站在移动版本的右侧有奇怪的边距。此外，有些风格根本不合适。 我设置了初始比例，以及使用的媒体查询。我将提供指向以下网站的链接。如果有人能帮助我，将不胜感激。作为一个自学的人，很高兴听到更有经验的开发人员的意见(：
网站：http：//www.onceuponaneventnj.com/
body{
margin:0;
padding:0;
overflow-x:hidden;
background-color:#EB9AAA;
}
header{
background-image:url("http://static2.businessinsider.com/image/568d6b65dd0895aa458b46bd-1190-625/bride-outraged-after-the-knot-helps-wedding-venue-bury-negative-review.jpg");
height:85vh;
background-size:cover;
background-position:center;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
header{
height:85vh;
background-size:auto;
background-attachment:scroll;
}
@media screen and (max-width:754px){
header{
background-repeat: no-repeat;
background-attachment:fixed;
background-position:left;
height:82vh;
}
}
.banner_header{
display:flex;
height:100vh;
align-items: center;
margin-left:550px;
width:100%;
}
@media screen and (max-width:1100px){
.banner_header{
margin-left:100px;
}
}
.banner_header_text{
font-family: 'Dancing Script', cursive;
font-size:68px;
color:#EE7E7E;
animation:banner_animation 3s ease-in;
max-width:100%;
margin-left:-70px;
}
@media screen and (max-width:600px){
.banner_header_text{
display:none;
}
}
@keyframes banner_animation{
from{opacity:0}to{opacity:1}
}
#stars{
opacity:.60;
}
.logo h1{
font-size:34px;
color:white;
margin-right:100px;
margin-top:15px;
font-family: cursive,sans-serif;
}
.logo h1 a{
text-decoration: none;
color:white;
letter-spacing:1px;
}
@media screen and (max-width:600px){
.logo h1{
display:flex;
justify-content: center;!important;
align-items: center;
width:100%;
height:100px;
margin-top:-20px;
padding-top:5px;
font-size:25px;
font-family:'tangerine',cursive,sans-serif;
}
header{
height:85vh;
}
}
/*-------------MAIN NAVIGATION---------------------------*/
.main-navigation{
display:flex;
margin:0;
padding:0;
background-color:#EE7E7E;
width: 100%;
height:70px;
justify-content: center;
}
.main-navigation ul{
display:inline-flex;
}
.main-navigation ul li{
font-size:20px;
z-index:1;
list-style:none;
padding-top:10px;
}
.main-navigation ul li a{
text-decoration:none;
color:white;
padding:15px;
font-family:'Lato',sans-serif;
}
.main-navigation ul li a:hover{
opacity:.20;
}
nav ul li:hover .menu_services_child{
display:flex;
}
nav ul li:hover>.menu_services_child a{
color:#f45050;
}
.menu_services_child{
display:none;
height:500px;
flex-direction:column;
position:absolute;
padding-top:15px;
color:#F45050;
margin-left:10px;
font-size:18px;
}
label{
margin-left:20px;
width:100%;
position:absolute;
font-size:32px;
line-height:70px;
display:none;
}
#toggle{
display:none;
}
@media screen and (max-width:667px){
label{
display:block;
cursor:pointer;
}
nav{
visibility: hidden;
}
.main-navigation{
width:100%;
font-size:15px;
height:80px;
}
.main-navigation ul li{
padding-top:0;
}
nav ul{
display:block;
margin-top:80px;
margin-right:-30px;
}
nav ul li{
display:block;
}
.main-navigation ul {
display:flex;
flex-direction: column;
margin-left:-405px;
}
.main-navigation ul li a{
font-size:16px;
text-align:center;
color:black;
font-family:cursive,sans-serif;
display:inline-block;
background-color:pink;
width:100%;
}
.main-navigation .menu_services_child a{
font-size:12px;
}
.menu_services_child{
height:210px;
width:100%;
margin-left:0;
}
nav ul li:hover .menu_services_child {
display:flex;
flex-direction:column;
font-size:15px;
position:relative;
width:100%;
font-size:2px;
padding-top:5px;
}
input[type=checkbox]:checked~nav{
visibility: visible;
}
}
/*-----------------------------------------------------
-----------------------AFTER HEADER , PINK BOX--------*/
.first_container{
height:200px;
width:100%;
background-color:#E48C8C;
}
@media screen and (max-width:600px){
.first_container{
height:120px;
line-height:40px;;
}
}
.pt_one{
padding:10px;
letter-spacing:3px;
}
.main_tag_one{
font-size:35px;
margin-bottom:12px;
display:flex;
justify-content:center;
color:#EEE9E9;
font-family: 'tangerine', cursive;
}
.underline_firstcontainer{
border-top:1px solid #CA7474;
width:10%;
height:1px;
position:absolute;
margin-top:20px;
margin-left:120px;
}
@media screen and (max-width:600px){
.main_tag_one{
display:none;
}
}
.main_tag_two{
font-size:25px;
margin-top:50px;
color:#FFC0C0;
display:flex;
justify-content: center;
font-family: 'Bubbler One', sans-serif;
}
@media screen and (max-width:600px){
.main_tag_two{
font-size:20px;
width:100%;
text-align:center;
margin-top:1px;
color:#FCEAEA;
}
}
/*---------------------
-----------------------------BOXES----------------------------*/
.second_container{
display:grid;
grid-template-columns: 25% 25% 25% 25%;
height:400px;
background-color:white;
color:white;
}
@media screen and (max-width:600px){
.second_container{
display:block;
width:100%;
}
}
.box{
background-color:#444;
color:#fff;
font-size:150%;
}
.box-a {
background-image:url('images/wedding2.png');
background-position:center;
background-size:cover;
filter:grayscale(70%);
transition: .5s ease-in-out;
}
.box-a a{
text-decoration: none;
color:white;
}
#weddings{
font-size:50px;
display:flex;
justify-content: center;
height:100%;
align-items: center;
font-family: 'Tangerine', cursive;
}
.box-a:hover{
filter:grayscale(0);
}
.box-b{
background-image:url('images/social1.jpg');
background-position:center;
background-size:cover;
overflow:hidden;
filter:grayscale(70%);
transition: .5s ease-in-out;
}
.box-b a{
text-decoration: none;
color:white;
}
.box-b:hover{
filter:grayscale(0);
}
#social{
font-size:50px;
display:flex;
justify-content: center;
height:100%;
align-items: center;
font-family: 'Tangerine', cursive;
}
.box-c{
background-image:url('images/corporate1.jpg');
background-position:center;
background-size:cover;
filter:grayscale(70%);
transition: .5s ease-in-out;
}
.box-c a{
text-decoration: none;
color:white;
}
.box-c:hover{
filter:grayscale(0);
}
#corporate{
font-size:50px;
display:flex;
justify-content: center;
height:100%;
align-items:center;
font-family: 'Tangerine', cursive;
}
.box-d{
background-image:url('images/island.jpg');
background-position:center;
background-size:cover;
filter:grayscale(70%);
transition: .5s ease-in-out;
}
.box-d a{
text-decoration: none;
color:white;
}
.box-d:hover{
filter:grayscale(0);
}
.box-d_content{
color:white;
height:100%;
font-size:50px;
display:flex;
justify-content: center;
height:100%;
align-items:center;
font-family: 'Tangerine', cursive;
}
@media screen and (max-width:600px){
.box-a{
height:200px;
}
.box-b{
height:200px;
}
.box-c{
height:200px;
}
.box-d{
height:200px;
}
}
/*-------------------------------ABOUT SARA PAGE HOME------------------------
---------------------------------*/
.our_story{
display:block;
height:500px;
width:100%;
margin-bottom:250px;
}
.our_story img{
width:267px;
height:400px;
border-radius:20px;
margin-left:-100px;
position:absolute;
}
.our_story_title{
padding-top:15px;
font-size:25px;
font-family: 'Dancing Script', cursive;
}
#our_story_underline{
border-bottom: 1px solid black;
position:absolute;
margin-top:120px;
width:100px;
text-align:center;
}
.our_story_subheader{
font-size:14px;
display:flex;
justify-content: center;
font-family:cursive, sans-serif;
}
.our_story_title{
display:flex;
justify-content:center;
}
#walt{
display:flex;
justify-content: center;
margin-top:-10px;
font-size:16px;
width:100%;
font-family: cursive, sans-serif;
}
.our_story_text {
font-size:18px;
display:inline-flex;
line-height: 30px;
height:100%;
width:60%;
align-items: flex-start;
justify-content: center;
font-family: 'Bubbler One', sans-serif;
padding-left:100px;
padding-right:20px;
margin-right:100px;
}
@media screen and (max-width:600px){
.our_story{
display:block;
margin-top:400px;
font-size:10px;
height:900px;
}
#walt{
font-size:12px;
text-align:center;
}
.our_story_text{
font-size:14px;
width:80%;
padding-left:50px;
margin-right:50px;
overflow:hidden;
line-height:20px;
}
.our_story img{
height:350px;
margin-top:-400px;
}
}
@media screen and (max-width:754px){
.our_story{
display:block;
margin-top:400px;
font-size:10px;
height:900px;
}
#walt{
font-size:12px;
text-align:center;
}
.our_story_text{
font-size:14px;
width:80%;
padding-left:50px;
margin-right:50px;
overflow:hidden;
line-height:20px;
}
.our_story img{
height:350px;
margin-top:-400px;
margin-left:60px;
}
}
.footer_wrapper{
height:300px;
width:100%;
background-color:#E35B5B;
}
.footer_nav{
display:inline-flex;
width:100%;
justify-content: center;
margin-top:50px;
}
.footer_nav li{
list-style:none;
}
.footer_nav li a{
font-size:40px;
color:#EE7E7E;
padding:20px;
text-decoration:none;
font-family: 'Bubbler One', sans-serif;
}
.footer_nav li a:hover{
color:white;
}
.footer_icons ul{
display:flex;
justify-content:center;
align-items:center;
height:100px;
width:100%;
list-style: none;
color:white;
margin-top:-10px;
}
.footer_icons ul li{
font-size:40px;
text-decoration: none;
background:#CA7474;
border-radius:100px;
margin:10px;
}
.footer_icons ul li a{
padding:18px;
color:#F3C7C7;
}
.footer_icons ul .facebook:hover{
background:#3b5998;
opacity:.88;
}
.footer_icons ul .instagram:hover{
background:#9b6954;
opacity:.88;
}
.footer_icons ul .linkedin:hover{
background:#0077B5;
opacity:.88;
}
#email{
display:flex;
font-size:16px;
justify-content: center;
width:100%;
margin-left:50px;
margin-top:-20px;
font-family:'lato';
}
#email a{
text-decoration: none;
color:#EE7E7E;
}
#email a:hover{
color:#FFEDED;
}
.footer_cellphone{
display:flex;
justify-content: center;
margin-top:10px;
font-size:16px;
margin-left:50px;
color:#EE7E7E;
text-decoration: none;
font-family:'museo_sans300';
width:100%;
}
.footer_cellphone:hover{
color:#FFEDED;
}
@media screen and (max-width:600px){
.footer_wrapper{
height:300px;
}
.footer_nav li a{
font-size:30px;
padding:10px;
}
.footer_nav{
text-align:center;
margin-left:-45px;
}
.footer_icons{
display:flex;
justify-content: center;
margin-left:-50px;
}
.footer_icons ul li{
font-size:20px;
}
#email{
width:200px;
margin:-20px auto auto auto;
}
.footer_cellphone{
width:200px;
margin:10px auto auto auto;
}
}<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Lato|Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bubbler+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<script src="https://use.fontawesome.com/c270b3bf59.js"></script>
<title>Once Upon An Event</title>
</head>
<header>
<div class="main-navigation">
<div class="logo">
<h1><a href="index.html">Once Upon An Event</a></h1>
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"</input>
<nav>
<ul id="menu_services">
<li>
<a href="#">Services</a>
<div class="menu_services_child">
<a href="weddings.html">Weddings</a>
<a href="Social.html">Social</a>
<a href="corporate.html">Corporate</a>
<a href="vacation.html">Vacation</a>
</div>
</li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<div class="banner_header">
<div class="banner_header_text">
<h1>Making Dreams A Reality...</h1>
</div>
</div>
</header>
<body>
<div class="first_container">
<div class="pt_one">
<div class="main_tag_one"><h2>Once Upon An Event</h2><div class="underline_firstcontainer"></div></div>
<div class="main_tag_two"><h3>Planning the Event you've Always Dreamed Of</h3></div>
</div>
</div>
<div class="second_container">
<div class="box-a"><a href="weddings.html"><div id="weddings">Weddings</div></a></div>
<div class="box-b"><a href="social.html"><div id="social">Social</div></a></div>
<div class="box-c"><a href="corporate.html"><div id="corporate">Corporate</div></a></div>
<div class="box-d"><a href="Vacation.html"><div class="box-d_content">Vacation</div></a>
</div>
</div>
<div class="our_story">
<div class="our_story_title">
<div id="our_story_underline"></div>
<h1>Sara Ray</h1></div>
<div class="our_story_subheader"><h2>Founder & CEO</h2></div>
<div id="walt"> <h3><b>”All our dreams can come true, if we have the courage to pursue them.” ~ Walt Disney</b></h3></div>
<div class="our_story_text"><p> A graduate from the State University of New York at New Paltz, Sara began her career by
working for The SYNERGY Events. She helped coordinate the Emerging Trends Fashion Show which took place during both New
York and Boston's Fashion Week. Her main duties included booking various vendors like
photographers, entertainment, hairstylists/MUA as well as making the event run as smoothly as
possible. In addition, she worked for Todd & Jayde in the Morning on WPLJ 95.5 where she
assisted with multiple tasks in a fast-paced environment .<br><br>
Lastly, Sara worked for the Madison Square Garden Company with the Communications team
for the New York Rangers. Within that time frame, she helped plan and organize on and off-ice
events and setting up the media area prior to every hockey game .<br><br>
All of these skills Sara has aquired throughout these experiences have given her a chance
to grow and become more knowledgable in the field. This is why she came to the decision
to open up Once Upon An Event, LLC. OUAE will focus on every client's individual needs and wants, guranteeing their event is as magical as they imagined.
OUAE can be the key component to making a client’s
dreams, a reality..</p>
</div>
<img src="images/saraabout.jpg"width="500px" height="800px">
</div>
</body>
<footer>
<div class="footer_wrapper">
<ul class="footer_nav">
<li><a href="about.html">About</a></li>
<li><a href="weddings.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="footer_icons">
<ul>
<li class="facebook"><a href="https://www.facebook.com/onceuponaneventnj/" target="_blank"><i class="fa fa-facebook fa-fw" aria-hidden="true"></a></i></li>
<li class="instagram"><a href="https://www.instagram.com/onceuponanevent_/"target="_blank"><i class="fa fa-instagram fa-fw" aria-hidden="true"></a></i></li>
<li class="linkedin"><a href="https://www.linkedin.com/in/sararayrozycki/" target="_blank"><i class="fa fa-linkedin fa-fw" aria-hidden="true"></a></i></li>
</ul>
</div>
<div id="email"><a href="mailto:onceuponaneventservices@gmail.com">OnceUponAnEventServices@gmail.com</a></div>
<div class="footer_cellphone">Contact Us: 201-456-6773</div>
</div>
</footer>你在这里粘贴了太多的代码，而你不能指望有人完成所有代码并修复它。
我可以建议您，在Chrome开发人员工具(或最流行的浏览器的开发工具(中，可以选择将浏览器缩小到流行手机的移动尺寸。
如果选择这些预设之一，则可以查看开发工具以查看出了什么问题，查看并调整属性以查看它们在此大小下应该是什么。也许那时您可能需要添加一些额外的媒体查询。
不要分阶段，你很少会有 1 个很好的规则，可以在各种尺寸上很好地扩展所有内容。通常需要多个媒体查询。
祝你好运！