我在我的笔记本电脑上设计了我的网站，其分辨率为1600 x 900，它就像image here，但当我将笔记本电脑的分辨率更改为1920 x 1080时，图像和导航栏之间存在间隙like this
这是我在1600 x 900分辨率下的图像代码
#home1 {
background-image: url(breather.jpg);
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
width: 78%;
margin-left: auto;
position: relative;
}
如何消除1920 x 1080分辨率的差距？三江源。
EDITED 这是我的完整网站代码
<!DOCTYPE html>
<html>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body {font-size:16px; background-color: #f4f4f4;}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
.mySlideshiw {display:none}
.centered {
position: absolute;
top: 40%;
left: 0;
right: 0;
text-align: center;
margin: auto;
font-family: 'Times New Roman';
font-size: 2em;
/*background-color: white;
background-color: rgba(255,255,255,0.1);*/
}
.centered1 {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
margin: auto;
font-family: Aharoni;
font-size: 3em;
background-color: white;
background-color: rgba(255,255,255,0.5);
}
#home1 {
background-image: url(breather.jpg);
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
width: 78%;
margin-left: auto;
position: relative;
}
#home2 {
background-image: url(gambar6.jpg);
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
width: 78%;
margin-left: auto;
position: relative;
}
#home3 {
background-image: url(gambar4.jpg);
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
width: 78%;
margin-left: auto;
position: relative;
}
#home4 {
background-image: url(gambar5.jpg);
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
width: 78%;
margin-left: auto;
position: relative;
}
#home5 {
background-image: url(gambar3.jpg);
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
width: 78%;
margin-left: auto;
position: relative;
}
#hiw1 {
background-image: url(gambar3.jpg);
width: 100%;
height: 100%;
/*background-repeat: no-repeat;*/
/*background-size: cover;*/
/*margin-left: auto;*/
/*position: relative;*/
}
@media only screen and (max-width: 990px){
#home1,#home2,#home3,#home4,#home5,#hiw1 {
width : 100%;
}
}
@media only screen and (min-width: 1024px) and (orientation:portrait){
#home1,#home2,#home3,#home4,#home5,#hiw1 {
width : 71%;
}
nav {
width: 29% !important;
}
}
@media only screen and (max-width: 600px){
.centered {
font-size: 1em;
}
.centered1 {
font-size: 1.5em;
}
}
</style>
<body>
<!--button buat balik ke atas-->
<button onclick="topFunction()" id="myBtn" title="Go to top" class="fa fa-arrow-up"></button>
<!-- Sidebar/menu background-color:#B2FFE6 -->
<?php
include "include/navigation_interior.php"
?>
<!-- Header/home -->
<!-- <div id="home"> -->
<div id="home1" class="mySlides fade">
<div class="centered w3-text-black"><i>Welcome to our studio!</i></div>
<div class="centered1 w3-text-black">WHERE IDEAS MEET THE REALITY.</div>
</div>
<!--slideshow-->
<div id="home2" class="mySlides fade">
</div>
<div id="home3" class="mySlides fade">
</div>
<div id="home4" class="mySlides fade">
</div>
<div id="home5" class="mySlides fade">
</div>
<!-- </div> -->
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:340px;margin-right:40px">
<!-- Services -->
<div class="w3-container" id="services" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-teal"><b>Services.</b></h1>
<hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid">
<p>We are a interior design service that focus on what's best for your home and what's best for you!</p>
<p>Some text about our services - what we do and what we offer. We are lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<!-- Projects Photo grid (modal) -->
<div class="w3-row-padding" id="projects">
<h1 class="w3-xxxlarge w3-text-teal"><b>Real Projects.</b></h1>
<hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid">
<div class="w3-half">
<?php
include('koneksi.php');
$query = mysql_query("SELECT e.id,e.image,e.id_designer,d.nama_designer,e.description FROM editproject e JOIN designer d ON e.id_designer = d.id_designer WHERE e.id <=3");
while($data = mysql_fetch_row($query)){
echo "<img src='/WEBSITE_1/Gambar/$data[1]' style='width:100%; height:300px;' onclick='onClick(this)' alt='Designed by : $data[3] <br> $data[4]'>";
}
?>
</div>
<div class="w3-half">
<?php
include('koneksi.php');
$query = mysql_query("SELECT e.id,e.image,e.id_designer,d.nama_designer,e.description FROM editproject e JOIN designer d ON e.id_designer = d.id_designer WHERE e.id > 3 AND e.id < 7");
while($data = mysql_fetch_row($query)){
echo "<img src='/WEBSITE_1/Gambar/$data[1]' style='width:100%; height:300px' onclick='onClick(this)' alt='Designed by : $data[3] <br> $data[4]'>";
}
?>
</div>
<!--untuk see more-->
<a href="fullproject1.php" class="w3-col m4 w3-margin-top">See our entire projects</a>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
<span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption"></p>
</div>
</div>
<!-- Designers -->
<div class="w3-container" id="designers" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-teal"><b>Designers.</b></h1>
<hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid">
<p>The best team in the world.</p>
<p>We are lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p><b>Our designers are :</b></p>
</div>
<!-- The Team -->
<div class="w3-row-padding">
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-teal">
<?php
include('koneksi.php');
$query = mysql_query("SELECT id_designer, nama_designer, description, foto FROM designer WHERE id_designer='D002'");
while ($row = mysql_fetch_row($query)){
?>
<img src="/WEBSITE_1/Gambar/<?php echo $row[3]?>" style="width:100%; height:250px;" alt='image'>
<div class="w3-container">
<h3><?php echo $row[1];?></h3>
<b class="w3-text-ijo">CEO & Founder</b>
<p><?php echo $row[2];?></p>
</div>
</div>
<?php }?>
</div>
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-teal">
<?php
include('koneksi.php');
$query = mysql_query("SELECT id_designer, nama_designer, description, foto FROM designer WHERE id_designer='D138'");
while ($row = mysql_fetch_row($query)){
?>
<img src="/WEBSITE_1/Gambar/<?php echo $row[3]?>" style="width:100%; height:250px;" alt='image'>
<div class="w3-container">
<h3><?php echo $row[1];?></h3>
<b class="w3-text-ijo">CEO & Founder</b>
<p><?php echo $row[2];?></p>
</div>
</div>
<?php }?>
</div>
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-teal">
<?php
include('koneksi.php');
$query = mysql_query("SELECT id_designer, nama_designer, description, foto FROM designer WHERE id_designer='D141'");
while ($row = mysql_fetch_row($query)){
?>
<img src="/WEBSITE_1/Gambar/<?php echo $row[3]?>" style="width:100%; height:250px;" alt='image'>
<div class="w3-container">
<h3><?php echo $row[1];?></h3>
<b class="w3-text-ijo">CEO & Founder</b>
<p><?php echo $row[2];?></p>
</div>
</div>
<?php }?>
</div>
<!--untuk see more-->
<a href="fulldesigner1.php" class="w3-col m4">See our entire designers</a>
</div>
<!-- Packages / Pricing Tables -->
<div class="w3-container" id="packages" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-teal"><b>Packages.</b></h1>
<hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid">
<p>Some text our prices. Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
</div>
<div class="w3-row-padding">
<div class="w3-half w3-margin-bottom">
<ul class="w3-ul w3-white w3-center">
<?php
include "koneksi.php";
$query = "SELECT nama_paket FROM package WHERE jenis_paket = '1'";
$select_all = mysql_query($query);
$row = mysql_fetch_row($select_all);
$nama_paket = $row[0];
?>
<li class="w3-background-ijotua w3-xlarge w3-padding-32 w3-text-white"><?php echo $nama_paket; ?></li>
<?php
include "koneksi.php";
$query1 = "SELECT jumlah_revisi,jumlah_tampak,keterangan,floorplanning, harga_paket FROM package WHERE jenis_paket = '1'";
$select = mysql_query($query1);
$row1 = mysql_fetch_row($select);
$jumlah_revisi = $row1[0];
$jumlah_tampak = $row1[1];
$ket = $row1[2];
$floor = $row1[3];
$harga = $row1[4];
?>
<li class="w3-padding-16"><?php echo $jumlah_revisi; ?></li>
<li class="w3-padding-16"><?php echo $jumlah_tampak; ?></li>
<li class="w3-padding-16"><?php echo $ket; ?></li>
<li class="w3-padding-16"><?php echo $floor; ?></li>
<li class="w3-padding-16"><h2>Rp. <?php echo $harga; ?></h2>
<span class="w3-opacity">per room</span>
</li>
<li class="w3-white w3-padding-24">
<a href="signup.php"><button class="w3-btn w3-background-ijotua w3-padding-large w3-text-white">Sign Up</button></a>
</li>
</ul>
</div>
<div class="w3-half">
<ul class="w3-ul w3-white w3-center">
<?php
include "koneksi.php";
$query = "SELECT nama_paket FROM package WHERE jenis_paket = '2'";
$select_all = mysql_query($query);
$row = mysql_fetch_row($select_all);
$nama_paket = $row[0];
?>
<li class="w3-background-birutua w3-xlarge w3-padding-32 w3-text-white"><?php echo $nama_paket; ?></li>
<?php
include "koneksi.php";
$query1 = "SELECT jumlah_revisi,jumlah_tampak,keterangan,floorplanning, harga_paket FROM package WHERE jenis_paket = '2'";
$select = mysql_query($query1);
$row1 = mysql_fetch_row($select);
$jumlah_revisi = $row1[0];
$jumlah_tampak = $row1[1];
$ket = $row1[2];
$floor = $row1[3];
$harga = $row1[4];
?>
<li class="w3-padding-16"><?php echo $jumlah_revisi; ?></li>
<li class="w3-padding-16"><?php echo $jumlah_tampak; ?></li>
<li class="w3-padding-16"><?php echo $ket; ?></li>
<li class="w3-padding-16"><?php echo $floor; ?></li>
<li class="w3-padding-16"><h2>Rp. <?php echo $harga; ?></h2>
<span class="w3-opacity">per room</span>
</li>
<li class="w3-white w3-padding-24">
<a href="signup.php"><button class="w3-btn w3-background-birutua w3-padding-large w3-text-white">Sign Up</button></a>
</li>
</ul>
</div>
</div>
<!-- How It Works -->
<div class="w3-container" id="hiw" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-teal"><b>How It Works ?</b></h1>
<hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid">
<p>Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
<div class="">
<div class="">
<!-- <img class="mySlideshiw" src="gambar3.jpg" style="width:100%"> -->
<img class="mySlideshiw" src="STEP1.png" style="width:100%">
<img class="mySlideshiw" src="STEP2.png" style="width:100%">
<img class="mySlideshiw" src="STEP3.png" style="width:100%">
<img class="mySlideshiw" src="STEP4.png" style="width:100%">
</div>
</div>
<div class="w3-center">
<div class="w3-section">
<button class="w3-button demo" onclick="currentDiv(1)">1</button>
<button class="w3-button demo" onclick="currentDiv(2)">2</button>
<button class="w3-button demo" onclick="currentDiv(3)">3</button>
<button class="w3-button demo" onclick="currentDiv(4)">4</button>
</div>
</div>
</div>
<!-- Testimony -->
<div class="w3-container" id="testimony" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-teal"><b>Testimony</b></h1>
<hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid">
<p>Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
<a href="fulltestimony.php"><button class="w3-btn w3-background-birutua w3-padding-large w3-text-white">See All Testimony</button></a>
</div>
<!-- End page content -->
<?php include "include/footer_interior.php";
?>
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
//untuk slideshow
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 3000); // Change image every 2 seconds
}
//tombol back to top
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
//Slideshow HIW
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlideshiw");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-red";
}
</script>
</body>
</html>
enter code here
当我尝试检查元素时，间隙是左边距 enter image description here
