I am facing an issue with centering an h1 header within a .banner element. When I try to apply margin to the header, it appears to indent not from the top border of the banner, but rather from the nav element located above the banner.
After inspecting the screenshot using Chrome's tool, it is evident that the heading indents based on where the nav element ends.
I am seeking advice on identifying the problem and finding a solution. Any help or tips would be greatly appreciated.
screenshot
.container {
width: 1024px;
margin: auto;
overflow: hidden;
}
a {
text-decoration: none;
}
/*
***********
* =banner
***********
*/
.banner {
background: url(../img/banner1.jpg);
width: 1024px;
height: 580px;
margin: auto;
}
.banner h1 {
text-align: center;
font-size: 100px;
font-weight: normal;
margin: 200px;
}
/*
***********
* =nav
***********
*/
nav {
margin-left: -35px;
margin-top: 0;
margin-bottom: 0px;
position: relative;
}
nav li {
display: inline;
}
nav .left-nav {
margin-top: -20px;
margin-right: 0px;
width: 200px;
float: right;
position: relative;
padding-top: 20px;
}
#login {
position: absolute;
top: 11px;
right: 0;
}
header h3 {
text-indent: -9999px;
}
header h3:after {
clear: both;
display: block;
content: ' ';
visibility: hidden;
height: 1%;
}
header h3 a {
background: url(../img/cart.png) no-repeat;
width: 48px;
height: 44px;
position: absolute;
top: 10px;
left: 0;
padding: 0;
}
header h3 a:hover {
background-color: white;
}
nav a {
font-family: 'Indie Flower', cursive;
font-size: 26px;
letter-spacing: 3px;
margin-right: 5px;
color: #0d0d0d;
padding: 10px 5px;
}
nav a:hover {
background-color: #e8e8e8;
}<body>
<div class="container">
<header>
<nav>
<ul>
<li><a href="#">Прайслист</a></li>
<li><a href="#">Подбор букета</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
<div class="left-nav">
<li><h3><a href="#" ></a>Корзина</h3></li>
<li><a href="#" id="login">Войти</a></li>
</div>
</ul>
</nav>
<div class="banner">
<a href="#" id="left"></a> <!-- image replacement лучше сделать в css без картинки -->
<a href="#" id="right"></a> <!-- image replacement -->
<h1>Цветочный Дом Полины</h1>
<ul>
<li id=visited><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</header>
<div class="main">
<div class="news">
<h2>Новости нашего магазина</h2>
<p>
Lorem ipsum dolor sit amet, 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.
</p>
<img src="#" alt="Heart-shaped box of flowers">
</div>
<div class="portfolio">
<h2>Наши последние работы</h2>
<div class="image-container">
<img src="#" alt="Пример 1">
<img src="#" alt="Пример 2">
<img src="#" alt="Пример 3">
</div>
<p>
Во все времена цветы олицетворяют счастье, улыбку, радость, прекрасное настроение и чудеса. Именно цветами Вы можете рассказать о своих чувствах дорогим сердцу людям, поэтому многие тысячелетия люди стараются украсить свою жизнь и жизнь близких этими ароматными малышками. В любой момент жизни цветы порадуют и вызовут искреннюю улыбку на лице.
</p>
</div>
</div>
</body>