dimanche 2 décembre 2018

Title and image not lined up to ul list?

Hello I'm having trouble centering my ul list to my title and main image using css. If you run the code the ul list is a bit to the left of the centered image and title. Also if I type in text-align: center; to the ul list it looks unorganized and the bullets aren't aligned to the left. Here is the code

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>McDonalds Tribute Page</title>

    <link rel="stylesheet" type="text/css" href="tribute.css">
  </head>
  <body>
    <div id="main">
      <header id="title">
        <h1>
        McDonalds Tribute Page
        </h1>
        </header>
        <div id="main-image">
         <!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds   Golden Arches" /> -->
        </div>



      <div id="tribute-info">
        <body>
          <h3 class="color-text">A timeline of all things McDonalds</h3>
          <ul id=list-info>
            <li>
              <strong>1953</strong> - McDonalds opens first franchise in Phoenix
            </li>
            <li>
              <strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
            </li>
            <li>
              <strong>1958</strong> - McDonalds has sold 100 million burgers
            </li>
            <li>
              <strong>1958</strong> - McDonalds spreads to the East Coast
            </li>
            <li>
              <strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
            </li>
            <li>
              <strong>1963</strong> - 1 Billion burgers sold
            </li>
            <li>
              <strong>1968</strong> - The Big Mac was introduced to McDonalds
            </li>
            <li>
              <strong>1980</strong> - Chicken McNuggets are introduced
            </li>
            <li>
              <strong>2015</strong> - All day breakfast introduced
            </li>
          </ul>
        </body>
      </div>

      <!-- <div class="img-gallery">
        <section>
          <img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
          <img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
          <img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
          <img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
          <img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
          <img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
        </section>
      </div> -->



      <body>

      </body>


    </div>
  </body>
</html>

and my css

   #main {
  display: grid;
}

#title {
  text-align: center;
}

#main-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#tribute-info {
  margin-left: auto;
  margin-right: auto;
}

I can't post images so I commented out the picture




Aucun commentaire:

Enregistrer un commentaire