我希望有人可以帮助我。当我打开我的页面时，我试图在Firefox中进行创建，它会被缩放。当我在safari中打开它时，它是一个不同的布局（左侧的col-md-1已经消失。）我是新的对此我很抱歉，如果我的代码很糟糕或答案很明显。我一直在尝试一些方法来修复它，但似乎没有任何工作。提前谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Life Atlas</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400i" rel="stylesheet">
<style>
/* Style the links inside the navigation bar */
a:hover{text-decoration: none;}
.topnav{
text-align:center;
z-index: 99;
color: black;
text-decoration:none;
border:1px solid #ccc;
border-radius: 6px;
border-width:1px 0;
position:absolute;
left: 0;
top: 20;
list-style:none;
padding:0;
background-color: white;
width: 100%;}
.topnav li{
display:inline;
font-size: 30px;}
.topnav a{
display:inline-block;
padding:50px;
text-decoration: none;
color: #BFBFBF;}
/* Change the color of links on hover */
.topnav a:hover {color: black;}
/* Add a color to the active/current link */
.topnav a.active {
color: black;}
#title{font-family: 'Alegreya', serif;
font-size: 250px;
text-align: center;}
.stories{font-size: 50px;}
.leftstories{font-size: 50px; display: block;}
.title-stories{font-size: 100px;
font-family: 'Lora', serif;
color: #BC9B5D;
padding-right: 100px;
padding-left: 100px;
width: 80%;}
.text-insert {text-align: justify;
padding-top: 50px;
padding-right: 100px;
padding-left: 100px;}
.right{
text-decoration: none;
padding-bottom:0px;
list-style: none;}
.right li{margin-top: 75px;}
.right li img{margin-top: 75px;
margin-bottom: 0px;}
.left{
text-decoration: none;
padding-bottom:0px;
list-style: none;}
.left li{margin-top: 75px;}
.left li img{margin-top: 75px;
margin-bottom: 75px;}
@import url(https://fonts.googleapis.com/css? family=Noto+Sans:400,700);
* {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; }
.image {background: url(photos/main-image-web.jpg) no-repeat fixed; background-image: no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 1000px;}
.banner h1, .banner h3, .banner h6, .banner p{
margin: 0;
text-align: center;
color: #7F7F7F;
background-color: white;}
.banner {
color: white;
background: url(photos/mornington.jpg) top left/cover no-repeat;
height: 2000px;
display: flex;
justify-content: center;
align-items: center;}
.banner h1{font-style: 'Lora', serif;
font-size: 100px;
padding-top: 30px;
padding-bottom: 50px;
padding-left: 150px;
padding-right: 150px;}
.banner p{font-size: 50px;
font-weight: normal;
padding-top: 50px;}
.banner h1: hover{color: black;
opacity: 0;}
</style>
</head>
<BODY>
<div class ="container-fluid">
<h1 id="title">Life Atlas</h1>
<div class="container-fluid">
<ul class="topnav">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">PHOTOGRAPHY</a></li>
<li><a href="">TRAVEL BLOG</a></li>
<li><a href="">COLLABORATION</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div></div>
<div class="image"></div>
<section class="content">
<div class="container-fluid" class="row">
<div class="col-md-1"></div>
<!--Left Hand Collum-->
<div class="col-md-5" style="margin-top: 450px">
<ul class="left">
<li>
<img src="photos/USA-2.jpg" style="width: 100%" class="pull-right">
</li>
<li>
<img src="photos/Bridge.jpg" style="width: 100%" class="pull-right">
</li>
<div class="leftstories">
<li>
<p style="padding-left: 100px">PHOTOGRAPHY</p>
<h2 class="title-stories">Looking for a dedicated and loveable photographer? You're in the right place.</h2>
<p class="text-insert">Whether it’s a relaxed family portrait session, a special event, a personal portrait session, the day you marry the love of your life; Life Atlas is dedicated to capturing beautiful passing moments and making sure that they can live forever..</p>
</li>
</div>
<li>
<img src="photos/homepageprofile.jpg" style="width: 100%">
</li>
</ul>
</div>
<!--right hand collum-->
<div class="stories">
<div class="col-md-5" style="padding-left: 50px">
<ul class="right">
<li>
<p style="padding-left: 100px;">TRAVEL</p>
<h2 class="title-stories">Stories from around the world</h2>
<p class="text-insert">Journey with me around the world, across the country, and sometimes even just down the street. A compilation of stories and advice, this is the atlas of my travels, written to help improve your travels.
This is advice straight from my heart, about all those things closest to it; adventure, photographic opportunities that take your breath away, and culinary delights that pair best with a glass of red.</p></li>
<li>
<img src="photos/Inspo.jpg" style="width: 100%">
</li>
<li>
<img src="photos/event.jpg" style="width: 100%">
</li>
<li>
<img src="photos/homepagewedding.jpg" style="width: 100%">
</li>
<li>
<p style="padding-left: 100px;">PERSONAL</p>
<h2 class="title-stories">So who is Life Atlas?</h2>
<p class="text-insert">The more suitable question may in fact be 'what is Life Atlas'? Each of our lives are a journey, and inevitably a story. My quest as a photographer is to add to your Life Atlas; to capture moments and memories that become part of your life story.
Life Atlas is the sum of your adventures, of my adventures. It is the every growing and ever evolving story of who I am, what I seek, how I work, where I've travelled and who I've met along the way.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<div class="banner">
<div class="banner-text"><a href="">
<p>READ MY LATEST BLOG</p>
<p>TRAVEL TO THE</p>
<h1>Mornington Peninsula</h1>
</div></a>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<p><a href="javascript:window.location.href=parallax.js-1.5.0"></a></p>
</section>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">. </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="/parallax.js.1.5.0"></script>
</BODY>
</html>