CSS layout issues

Question

I have followed guils best city guide sample and begun my own website. Right now I have issues with the inline property. My nav bar wont move to the right. Maybe the HTML is wrong?

HTML:

<!DOCTYPE html>
  <html>
    <head>
      <title>Homepage</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
    </head>

    <!------- Begin body here ----> 
    <body>

    <header class="main-header">
      <div class="container">
        <h1 class="name">Wild Sahara</h1>
         <ul>
              <li><a href="#link">Algerian Sahara</a></li>
              <li><a href="#link">Chadean Sahara</a></li>
              <li><a href="#link">Libyan Sahara</a></li>
         </ul>
        </div>
     </header>   

      <div class="container">
      <p>Lorem ipsum dolor sit amet, cu liber commodo nostrud quo, ea solet blandit nam. Te tantas partem altera nam, ut atomorum consulatu laboramus eos. Te pri feugiat apeirian sententiae, dicam possit et mea. Adversarium delicatissimi his eu. Placerat omittantur his et, ea has mazim errem ludus. Mel utinam essent audire te, suas theophrastus his ei. Te agam docendi sadipscing has, ut soleat nostro qui, eam nibh putent ex. </p>

    <img src="sahara.jpg" alt="sand dunes" class="photo-1">

     <p>Ad vocent aperiam platonem mea. Ut mei putent salutatus, ut has offendit recusabo, eos ne   delicata scriptorem. Liberavisse definitionem eam at.</p>

      <img src="sahara.jpg" alt="sand dunes" class="photo-2">

        <p>Ad vocent aperiam platonem mea. Ut mei putent salutatus, ut has offendit recusabo, eos ne delicata scriptorem. Liberavisse definitionem eam at.</p> 
         </div>

           <footer class="main-footer">
           <p>&copy; Immanuel Jaeggi Creations 2018</p> 
    </footer>   
  </body>  
</html>

CSS:

* {
 box-sizing: border-box;  
  }



/* Element selectors */


body {
  background: #FFE4B5;
}   

h1 {
  margin: 0 auto;
}   

a {
  text-decoration: none;
}   

.name,
ul li {
  text-align: center; 
 }   


 .main-header {
      color: #fff;
  background: url(Algeria_Sahara_Desert.jpg) center no-repeat;
  height: 300px;
  }   

.container  {
  padding-left: 1em;
  padding-right: 1em;
}   

.main-footer {
     text-align: center;
     padding: 2em 0;
     background: #d9e4ea;
     font-size: 1em;
 } 

.photo-1,
.photo-2 {
   width: 100%;
}


/* media queries */

@media (min-width: 769px) {

 .container {
   width: 70%;
   margin: 0 auto;
   max-width: 1000px;
}

.container,
.container li {
  display: inline-block;
}

Mod Note - Edited the post to add forum markdown to make the provided code clearer.

Answer 1 · 2018-03-09T12:29:10Z

March 9, 2018 12:29pm

Hi Immanuel,

The problem isn't with the HTML. What you're trying to do is I think stack the list items side by side and move them to the right of the page.

You'll also want to remove the bullet points that come automatically with lists that you're using for the nav bar.

I suggest modifying your CSS slightly to select only the unordered list and style the h2 separately.

ul {
  text-align: right; 
  list-style: none;
  display: inline-block;
 }

You can also then use the display property to stack the list items side by side.

ul li {  
  display: inline-block;
}

Answer 2 · 2018-03-12T08:48:15Z

March 12, 2018 8:48am

Hi and thanks a lot for your input...at the end this is what I did to get the nav bar on the smale line as the H1 header:

.name, .main-nav, .main-nav li { display: inline; }

For some reason, when I tried your recommendation it didn`t work..maybe there are a few ways to go about this?

Welcome to the Treehouse Community

Looking to learn something new?

Immanuel Jaeggi

Immanuel Jaeggi

CSS layout issues

2 Answers

Jonathan Grieve

Jonathan Grieve

Immanuel Jaeggi

Immanuel Jaeggi