В основном я хочу сделать это ...
... по центру и выровнено так:
Но, похоже, «поплавок» мешает этому.Как бы вы исправили это простым способом, чтобы первое изображение было похоже на второй код?
<title>Product Page</title>
<style type="text/css">
body{
background: #eee;
font-family: 'Lato', sans-serif;
}
#header-img{
float: left;
width:18.5em;
margin-top: 15px
}
.nav-link{
position: relative;
float:right;
padding: 30px 45px 15px 20px;
}
#hero{
width: 100%;
position: relative;
top: 120px;
margin-right: auto;
}
</style>
<body>
<header id="header">
<img src="trombones.jpg" id="header-img">
<nav id="nav-bar">
<div class="nav-link">Pricing</div>
<div class="nav-link">How It Works</div>
<div class="nav-link">Features</div>
</nav>
</header>
<div id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
</div>
</body>