Hi everybody, I’ve just finished my Tea Cozy Project, but unfortunately I didn’t success as I wanted: I cannot move the navbar on the right and the tre unordered lists in the boxex in the “locations” part don’t align to the center. Could anybody help me, please?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tea Cozy</title>
<link href="./risorse/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div>
<img class="logo" src="./risorse/css/img-tea-cozy-logo.png" alt="Tea Cozy Logo">
</div>
<div>
<ul class="navlist">
<li><a href="#mission">Mission</a></li>
<li><a href="#featured-tea">Featured Tea</a></li>
<li><a href="#locations">Locations</a></li>
</ul>
</div>
</header>
<main>
<!--MISSION-->
<section class="mission" id="mission">
<img src="./risorse/css/img-mission-background.jpg">
<div class="banner">
<h2>Our Mission</h2>
<h4>Handipicked, Artisanally Curater, Free Range, Sustenable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</section>
<!--FEATURED TEA-->
<section class="featured-tea" id="featured-tea">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
<div class="foto">
<div>
<img src="./risorse/css/img-berryblitz.jpg">
<p>Fall Berry Blitz Tea</p>
</div>
<div>
<img src="./risorse/css/img-spiced-rum.jpg">
<p>Spiced Rum Tea</p>
</div>
<div>
<img src="./risorse/css/img-donut.jpg">
<p>Seasonal Donuts</p>
</div>
<div>
<img src="./risorse/css/img-myrtle-ave.jpg">
<p>Myrtle Ave Tea</p>
</div>
<div>
<img src="./risorse/css/img-bedford-bizarre.jpg">
<p>Bedford Bizarre Tea</p>
</div>
</div>
</section>
<!--LOCATIONS-->
<section class="locations" id="locations">
<h2>Locations</h2>
<section class="box">
<div class="dove-trovarci">
<h3>Downtown</h3>
<ul class="indicazioni">
<li>384 West 4th St</li>
<li>Suite 108</li>
<li>Portland, Maine</li>
</ul>
</div>
<div class="dove-trovarci">
<h3>East Bayiside</h3>
<ul class="indicazioni">
<li>3433 Phisherman's Avenue</li>
<li>(Northwest Corner)</li>
<li>Portland, Main</li>
</ul>
</div>
<div class="dove-trovarci">
<h3>Oakdale</h3>
<ul class="indicazioni">
<li>515 Crescent Avenue</li>
<li>Second Floor</li>
<li>Portland, Maine</li>
</ul>
</div>
</section>
</section>
</main>
<!--FOOTER-->
<footer>
<h4>The Tea Cozy</h4>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
<p class="copyright">copyright The Tea Cozy 2017</p>
</footer>
</body>
CSS
body{
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
ul{
list-style: none;
}
/* HEADER */
header{
display: flex;
position: fixed;
z-index: 2;
flex-flow: row;
height: 69px;
border-bottom: 1px solid seashell;
box-sizing: border-box;
width: 100%;
background-color: black;
top: 0px;
align-content: center;
}
h2{
text-align: center;
}
.logo{
height: 50px;
margin-left: 10px;
margin-top: 10px;
}
.navlist{
display: flex;
justify-content: flex-end;
list-style-type: none;
padding: 0 10px;
}
li{
padding-inline: 10px;
}
a{
color: seashell;
}
/* MAIN */
main{
position: relative;
top: 70px;
}
/*MISSION*/
.mission{
height: 700px;
width: 1200px;
position: relative;
display: inline-block;
}
.mission img{
width: 100%;
height: auto;
}
.banner{
background-color: black;
justify-content: center;
position: absolute;
bottom: 250px;
text-align: center;
width: 100%;
align-items: center;
}
/* TEA */
.foto{
box-sizing: border-box;
width: 1000px;
text-align: center;
display: inline-flex;
justify-content: space-around;
gap: 20px;
flex-flow: row wrap;
}
.foto img{
height: 200px;
width: 300px;
}
.foto p{
top: 10px;
}
/* LOCATIONS */
.locations{
height: 500px;
width: 1200px;
position: relative;
display: inline-block;
align-items: center;
background-image: url("img-locations-background.jpg");
top: 50px;
}
.locations h2{
background-color: none;
}
h3{
margin-bottom: 15px;
}
.dove-trovarci{
background-color: black;
opacity: 1;
text-align: center;
box-sizing: border-box;
width: 300px;
display: inline-block;
justify-content: space-between;
gap: 40px;
}
.indicazioni{
display: inline-block;
list-style-type: none;
}
/*FOOTER*/
footer{
position: relative;
top: 150px;
height: 200px;
}
.copyright{
text-align: left;
margin-left: 20px;
font-size: 18px;
}