Centering page

I would like the below to be centered on the  page.  I'm not very good with CSS so if it needs to be modified, please feel free.

#id-block{float:left; padding: 5px;height:150px;width:100px;background-color:#FFFF99;margin:5px; }

nav{clear:left;}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}
.clear{clear:right};
div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}


<div>Welcome to <b> Flea Market</b><br />Come join us every 2 weeks and find great stuff</div>
<div class="clear">
<div class="gallery">
  <a target="_blank" href="fjords.jpg">
    <img src="fjords.jpg" alt="Fjords" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="forest.jpg">
    <img src="forest.jpg" alt="Forest" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="lights.jpg">
    <img src="lights.jpg" alt="Northern Lights" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="mountains.jpg">
    <img src="mountains.jpg" alt="Mountains" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</div>

<!-- http://www.patapscomarket.com/ -->
 <nav>
   <div id="id-block">About Us</div>
   <div id="id-block">Our Vendors</div>
   <div id="id-block">Become a vendor</div>
   <div id="id-block">Next Flea Market</div>
 </nav>
 

Open in new window


Here's the fiddle
http://jsfiddle.net/isogunro/ptm1cmne/
LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
Wrap all the elements in a div element with class content and then add the following css settings:
HTML:
<div class="content">
<div>Welcome to <b>Haymarket Flea Market</b><br />Come join us every 2 weeks and find great stuff</div>
<!-- https://www.w3schools.com/css/css_image_gallery.asp -->
<div class="clear">
<div class="gallery">
  <a target="_blank" href="fjords.jpg">
    <img src="fjords.jpg" alt="Fjords" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="forest.jpg">
    <img src="forest.jpg" alt="Forest" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="lights.jpg">
    <img src="lights.jpg" alt="Northern Lights" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="mountains.jpg">
    <img src="mountains.jpg" alt="Mountains" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</div>

<!-- http://www.patapscomarket.com/ -->
 <nav>
   <div id="id-block">About Us</div>
   <div id="id-block">Our Vendors</div>
   <div id="id-block">Become a vendor</div>
   <div id="id-block">Next Flea Market</div>
 </nav>
 </div>
 

Open in new window

CSS:
#id-block{float:left; padding: 5px;height:150px;width:100px;background-color:#FFFF99;margin:5px; }

nav{clear:left;}

.content {
    max-width: 500px;
    margin: auto;
}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}
.clear{clear:right};
div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.