Heading tags are causing problems. How do I fix the alignment?

Question

I am trying to add heading tags to the top of my page and the placement of the text changes when I add them. When I change the code from this:
<div class="header1" id="header">
      <div class="tonyshumski" id="tonyshumski">TONY SHUMSKI</div>
      <div class="photography" id="photography"><a href="Photography.html">PHOTOGRAPHY</a></div>
      <div class="blog" id="blog"><a href="http://www.tonyshumski.blogspot.com/">BLOG</a></div>
      <div class="contact" id="contact"><a href="contact.html">CONTACT</a></div>
    </div>
to this:
<div class="header1" id="header">
      <div class="tonyshumski" id="tonyshumski"><h1>TONY SHUMSKI</h1></div>
      <div class="photography" id="photography"><a href="Photography.html">PHOTOGRAPHY</a></div>
      <div class="blog" id="blog"><a href="http://www.tonyshumski.blogspot.com/">BLOG</a></div>
      <div class="contact" id="contact"><a href="contact.html">CONTACT</a></div>
    </div>
All of the text TONY SHUMSKI moves down in the div container and is no longer in line with the rest of the text. Here is how it looks http://www.tonyshumski.com/contact.html How do I maintain the proper placement in the div container? Or have I added these incorrectly?

Answer 1

This is caused by browser default settings. Add this to your CSS and see if this helps:
h1 {
font-size: 16px;
margin:0;
padding:0;
line-height: 1;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb