Tell us what’s happening:
I have created three unordered lists, which I positioned next to each other using the display: inline-block. Now I would like to center them on my page, but the display: block and margins on auto variant obviously doesn’t work, since I have already filled the display property. I tried nesting them all in a single section element and centering the section element but that doesn’t work either. Help would be greatly appreciated:)
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jelena Klepic Pianos</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<header id="header"><img src="https://images-platform.99static.com//JXezfFnYzmmS-xh48y1Om1H0Cz8=/0x0:1280x1280/fit-in/590x590/projects-files/27/2790/279059/aa0a3c97-f2c0-43ad-88ab-610d82dc99a1.jpg" id="header-img"/>
<nav id="nav-bar">
<ul id="navbar" class="navbar">
<li id="navbar"><a class="nav-link first">Jelena Klepic Designs</a></li>
<li id="navbar"><a class="nav-link" href="#pricing">Pricing</a></li>
<li id="navbar"><a class="nav-link">Locations</a></li>
<li id="navbar"><a class="nav-link">Contact</a></li>
</ul>
</nav>
</header>
<body>
<h1 id="pricing">Pricing</h1>
<p>Jelena Klepic Designs has a long history of sculpturing the finest Pianos in the world since 1789. We have supplied instruments to some of the world's greatest pianists and music enthusiasts alike. Our pianos range from simpler models for beginners, to exquisite compositions for the more experienced pianists among us. The prices range accordingly.</p>
<hr></hr>
<p class="p2">If you are interested in our catalogue do not hesitate to contact us. Leave us your email address and we will supply you with all the information you might need.</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">E-mail <input id="email" type="email" placeholder="Enter Your Email Here" name="email"></input>
<input type="submit" id="submit" value="Submit"></input>
</form>
<iframe id="video" width="450" height="280" src="https://www.youtube.com/watch?v=jBobfoL_SKo" frameholder="0" allowfullscreen alt="Yiruma playing on a Jelena Klepic Piano">
</iframe>
<h2>Locations</h2>
<p id="p3">We pride ourselves in having locations all around the world and therefore being at your service whereever you are. Whether you are looking for us in Asia, Europe or North America, we are always by your side. If we should not be near you please do not hesitate to contact us via E-mail or phone and we will be happy to accomodate you whether you are near or far.</p>
<section>
<ul class="locations" id="li1">
<li>Tokyo</li>
<li>Singapore</li>
<li>Beijing</li>
</ul>
<ul class="locations" id="li2">
<li>Vienna</li>
<li>Berlin</li>
<li>London</li>
</ul>
<ul class="locations" id="li3">
<li>New York</li>
<li>Los Angeles</li>
<li>Toronto</li>
</ul>
</section>
<h3>Contact</h3>
</body>
</html>
/* file: styles.css */
body{
font-size: 15px;
font-family: serif;
}
#nav-bar{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul#navbar{
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #deb887;
}
li#navbar{
float: left;
}
li a{
dsplay: block;
color: white;
text-align: center;
padding: 20px 20px;
text-decoration: none;
}
li a:hover:not(.first){
background-color: #d2691e;
}
#header-img{
display: block;
margin-right: auto;
margin-left: auto;
}
.first{
padding: 0 460px 0 0;
}
p{
margin-left: 20px;
margin-right: 20px;
}
h1{
margin-left: 10px;
}
.p2{
text-align: center;
margin-right: 20px;
margin-left: 20px;
}
form{
text-align: center;
padding-bottom: 50px;
}
#video{
display: flex;
margin: auto;
}
ul.locations{
display: inline-block;
list-style-type: none;
text-align: center;
padding-bottom: 50px;
padding-right: 50px;
}
section{
display: block;
margin-right: auto;
margin-left: auto;
}
h2{
font-size: 32px;
padding-top: 50px;
}
h3{
font-size: 32px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: