I built a website and it doesn't display correctly

Question

The image that I insterted at the top extends beyond the box.
www.diamond-pestcontrol.com.
I want the site to resize for the viewer so it's viewable on a small laptop, tablet, wide screen, phone etc.
I can't figure out how to do that let along how to get that top of the page to stay within the below borders.
Any help would be greatly appreciated.
I am using Adobe Dreamweaver CS5

Answer 1

PART #1 Change what you have now in your HTML to this:
<div class="header">
<img src="Diamond Pest Control Graphic 27.gif" alt="banner">
<!-- end .header --></div>
<div class="content">
<h1>Thanks for visiting Diamond Pest Control</h1>
PART #2
Change this in your CSS:
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #4E5869;
    margin: auto;
    margin:0 auto;
    padding: 0;
    color:#000;
    color: #FFF;
    background-color: #000000;
    height: 0px;
div align="center"></div>
.container {
    width: 80%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    background: #FFF;
    margin: auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
    margin: 0 auto;
    color:#000;
ADD THIS TO YOUR CSS:
#header img {
     width:100%;
     vertical-align:baseline;
EDIT:  Forgot to add black color to #container CSS.
Nancy O.
Message was edited by: Nancy O.