Почему .logo
располагается не посередине? И если добавить position: absolute
к .iphone-6
, то он пропадает, почему так?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header-bg {
background-image: url(images/bg/header.png);
height: 1000px;
background-repeat: no-repeat;
background-size: cover;
background-position: 45% 50%;
border: 1px solid transparent;
width: 100%;
}
.layout {
width: 1170px;
margin: 0 auto;
}
.burger-menu div {
width: 20px;
height: 2px;
background-color: red;
margin-bottom: 4px;
}
.logo {
position: absolute;
left: 50%;
top: 0;
}
.top-menu {
margin-top: 60px;
position: relative;
border: 1px solid red;
}
.top-menu a {
text-decoration: none;
color: #26272d;
}
.top-menu span {
margin-left: 40px;
}
.top-menu span:first-of-type {
margin-left: 0;
}
.menu1 {
position: absolute;
top: 0;
left: 50px;
}
.menu2 {
position: absolute;
top: 0;
right: 0;
margin-top: -10px;
}
.menu2 button {
background-color: #267df4;
width: 125px;
height: 40px;
border-radius: 18px;
color: white;
background-image: url(images/icons/apple-icon.png);
background-repeat: no-repeat;
background-position: 16px 8px;
border: none;
}
.menu2 button a {
color: white;
margin-left: 5px;
}
.top-text {
text-align: center;
margin-top: 140px;
}
.top-text h2 {
font-size: 62px;
margin-bottom: 50px;
}
.top-text p {
margin-bottom: 65px;
}
.top-text button {
width: 205px;
height: 50px;
border-radius: 22px;
border: 2px solid #dadcdf;
background-color: transparent;
}
.Iphone-6 {
background-image: url(images/icons/iphone-6.png);
background-repeat: no-repeat;
height: 450px;
margin-top: 70px;
margin-left: 380px;
}
<div class="header-bg">
<div class="layout">
<div class="top-menu">
<div class="burger-menu">
<div class="burger-menu-top"></div>
<div class="burger-menu-middle"></div>
<div class="burger-menu-middle"></div>
</div>
<div class="menu1">
<span><a href="#">Tour</a></span>
<span><a href="#">Features</a></span>
<span><a href="#">Pricing</a></span>
</div>
<div class="logo"><a href="#">NewProvidence</a></div>
<div class="menu2">
<span><a href="#">Help</a></span>
<span><a href="#">Contacts</a></span>
<span><button><a href="#">Get App</a></button></span>
</div>
</div>
<div class="top-text">
<h2>What happens tomorrow?</h2>
<p>The sight of the tumblers restored Bob Sawyer to a degree of eq</p>
<button>Watch video</button>
</div>
<div class="Iphone-6">
</div>
</div>
</div>