Why images don't display correctly


#1

my website does not look the same as the example. My four images for kitchen, woodwork, gifts and antiques are placed in a vertical line to the right over the jumbotron picture. Is there something I am missing?

type or paste code here
`<!DOCTYPE html>
<html>
<head>
  
  <title>Skillfair</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
   
  <body>
<header class="container">
<div class="row">
  <h1 class="col-sm-4">Skillfair</h1>
  <nav class="col-sm-8 text-right">
      <p>newest</p>
      <p>catalogue</p>
      <p>contact</p>
    </nav>
  </div>
</header>
</body>
  
<section class="jumbotron">
<div class="container">
  <div class="row text-center">
   <h2>Homemade Goods</h2>
      <h3>This Year's Best</h3>
      <a class="btn btn-primary" href="#" role="button">See all</a> 
    </div>
  </div>
</section>
  
  
  
  <section class="container">
    <div class="row">
    <figure class="col-sm-6">
       <p>Kitchen</p>
    <img     src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/kitchen.jpg">
    </figure>
     </div>
     
   <figure class="col-sm-6">
      <p>Woodwork</p>
    <img  src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/woodwork.jpg">
    </figure> 
  
    
     
       <div class="row">
  <figure class="col-sm-6">
    <p>gift</p>
    <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/gifts.jpg"/>
    </figure>
       </div>
     
    
    
    <figure class="col-sm-6">
      <p>antiques</p>
    <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/antique.jpg">
      </figure> 
   
      </section>
  </html>`

#2

@gigasolver79307,

  <body>
<header class="container">
<div class="row">
  <h1 class="col-sm-4">Skillfair</h1>
  <nav class="col-sm-8 text-right">
      <p>newest</p>
      <p>catalogue</p>
      <p>contact</p>
    </nav>
  </div>
</header>
</body> <<<<=== here you are closing the BODY of your document !!!!

Replace this closing-body-tag to just before the closing-HTML-tag....



#3

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