Product Landing Page - Build a Product Landing Page

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:

A section element takes up the entire width of the page by default so trying to center it won’t help because there is nothing to center. You want to center the content inside of the section element instead. I’m not sure setting the lists to inline-block is the best way to go about this as it will potentially give you problems in narrow view ports. Have you considered using flexbox on the section?

But if you want to continue with what you have now, there is a CSS property that allows you to position the content in an element rather easily. But the property refers to content as “text” and you can do more than just center it. This property allows you to “align” the content. Is that enough of a hint?

Oh my God thank you so much! it was the absolute easiest way to do it but I just didn’t think about it… thanks:)

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.