I need help with my first actual website


#1

Well I made my first website from scratch, and it looks good for the most part

but when I go to developer tools the whole page goes a little crazy

(I wanted to put a image of it being crazy here but since I’m new to the forums it only allows one image per post…It’s now in a reply down below.)

I’ve went to several professionally built websites and haven’t seen the same problem for them and I’m not sure if I’ve been typing the wrong things into google or what but I haven’t been able to come across any fixes for this.

I wanted to have the html and css down solid before moving to more complicated things but there just seem to be little snags, I have 2 or 3 different ways I’ve put the site together but this one seems to look the best… I guess maybe giving you guys some raw code would help

<!DOCTYPE html>
<html>
  <head>
    <link href="01test.css" type="text/css" rel="stylesheet"/>
    <title>Home-Finnish Family Bath Products</title>
	<meta name="description"
	  content="A small soap company that still makes things the old fashioned way, by hand."/>
	<meta name="keywords"
	  content="soap, home-made, local, organic, goatmilk, finnsoap, finnish family bath products"/>
	<meta name="robots"
      content="index, follow"/>
    <meta http-equiv="author"
      content=" TG" />
	<meta http-equiv="expires"
      content="Mon, 01 Jan 2018 23:45:59 GMT" />
  </head>	
  <body>
      <div class="home" id="homeButton">
	  <button><a href="index.html"><img src="images/interface/homebutton.png" alt="Home" Width="160" Height="129" style="background:transparent"/></a></button>
	  </div> <!-- end home button div -->
      <div class="topNav_outer_wrapper" id="topNav_outer_wrapper">
        <div class="topInner" id="contact_us_button">
		<button><a href="contact_us.html"><img src="images/interface/contactus1.png" alt="Contact Us" width="150" height="50"/></a></button>
		</div><!--end contact_us button div-->
        <div class="topInner" id="about_us_button">		
        <button><a href="about_us.html"><img src="images/interface/aboutus1.png" alt="About Us" width="150" height="50"/></a></button>
		</div><!--end about us button div-->
		<div class="topInner" id="faq_button">
        <button><a href="faq.html"><img src="images/interface/faq.png" alt="F.A.Q." width="150" height="50"/></a></button>
		</div><!--end of faq button div-->
		<div class="topInner" id="events_button">
		<button><a href="events.html"><img src="images/interface/events.png" alt="Events" width="150" height="50"/></a></button>
		</div><!--end of events button div-->
      </div> <!-- end top navigation bar outer wrapper div -->
	 <div class="sideNav_outer_wrapper" id="sideNav_outer_wrapper">
	  <div class="sideInner" id="baskets_button">
		<button><a href="baskets.html"><img src="images/interface/baskets1.png" alt="Baskets" width="150" height="50"/></a></button>
	  </div><!--end of baskets button div-->
      <div class="sideInner" id="gift_cert_button">	  
		<button><a href="gift_cert.html"><img src="images/interface/giftcertificates1.png" alt="Gift Certificates" width="150" height="50"/></a></button>
	  </div><!--end of gift certificates button div-->
      <div class="sideInner" id="lip_balm_button">	  
		<button><a href="lip_balm.html"><img src="images/interface/lipbalm1.png" alt="Lip Balm" width="150" height="50"/></a></button>
	  </div><!--end of lip balm button div-->
      <div class="sideInner" id="lotion_button">	  
		<button><a href="lotion.html"><img src="images/interface/lotion1.png" alt="Lotion" width="150" height="50"/></a></button>
	  </div><!--end of lotion button div-->
      <div class="sideInner" id="soap_button">	  
		<button><a href="soap.html"><img src="images/interface/soap2.png" alt="Soap" width="150" height="50"/></a><button>
	  </div><!--end of soap button div-->
      <div class="sideInner" id="sugar_scrub_button">	  
		<button><a href="sugar_scrub.html"><img src="images/interface/sugar_scrubs1.png" alt="Sugar Scrubs" width="150" height="50"/></a></button>
	  </div><!--end of sugar scrub button div-->
      <div class="sideInner" id="new_items_button">	  
		<button><a href="new_items.html"><img src="images/interface/newitems.png" alt="New Items" width="150" height="50"/></a></button>
	  </div><!--end of new items button div-->	
	 </div> <!--end side navigation outer wrapper div-->
   <div class="content_wrapper" id="content_wrapper">
    <div class="content_inner_wrapper" id="content_inner_wrapper"   
      <h1 lang="en-us">Welcome to Finnish Family Bath Products!</h1>
	  <hr />
	    <p id="homePageParagraph" lang="en-us"><img src="images/products/Saunabucket.png" alt="A sauna bucket with a variety of soaps and other products." 
	    height="308" width="308" align="top"/>Our Home-made <em>natural</em> soap is made the old fashioned way,
	    with the finest natural oils and fats such as olive, canola, 
	    coconut and palm kernel We also add ingredients such as shea butter, sweet almond oil, borage, primrose and lanolin for extra healing and  
	    softening. Some of the other ingredients we use are herbs, buckwheat hulls for exfoliation, or clay which has a detoxifying effect and adds slip 
	    for easy shaving. Home-made soap is very moisturising with all of the natural glycerine left in, it is free of chemicals and preservatives. We make
	    most of our soaps with fresh goat milk which contains vitamins A and E, amino acids and zinc necessary for skin renewal. The goat milk is also high in
	    alpha hydroxy acids which helps to dissolve old dead skin cells, leaving you with glowing younger looking skin. </p>
	 </div><!--end content_inner_wrapper div -->
	 </div><!--end content_wrapper div-->
	 <div class="footer_wrapper" id="footer_wrapper">
	 <div class="footer_inner_wrapper" id="footer_inner_wrapper">
       <p id="copyright">&copy; Finnish Family Bath Products </p>
	 </div><!--end footer_inner_wrapper-->  
     </div><!--end footer_wrapper div-->	   
  </body>
</html>  
html, body { 
    height:100%;
}
body {
    margin:0px;
	padding:0px;
	background-color: #006284;
	background-image: url(Images/background01.png);
	background-repeat: repeat-y;
}
div#footer_wrapper {
    width: 100%;
    height: 4%;
	text-align:center;
}
div#content_wrapper {
    margin: 1% 0% 5% 12%;
	width:85%;
}
div#footer_wrapper{
    min-width: 94%;
}
div#footer_inner_wrapper, div#content_inner_wrapper {
    width: 94%;
	margin: 0px auto;
}
div#contact_us_button , div#about_us_button, div#faq_button, div#events_button {
    display:inline;
	position:relative;
}
div#baskets_button{
    margin-top:12%;
}
div#baskets_button, div#gift_cert_button,	div#lip_balm_button, div#lotion_button,div#sugar_scrub_button, div#soap_button, div#new_items_button{
    padding-top:22%;
	padding-left:12%;
}
div#homeButton{
    float:left;
	margin: 1%;
}
div#topNav_outer_wrapper {
	background-image: url(Images/FinnishSoapBanner2.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 80%;
	height:30%;
	text-align:center;
	margin-left:15%;
} 
.home button {
    background:transparent;
	border: none;
}
.topInner{
    display:inline-block;
	position:relative;
}
.topInner button{
    margin-top:12%;
    background:transparent;
	border:none;
	margin-left:2%;
	margin-right:2%;	
}
.sideNav_outer_wrapper {
    position:absolute;
	top:25%;
    height: 100%;
	width: 10%; 
	background-image: url(Images/roundedtoolbar1.png);
	background-repeat: no-repeat;
	background-size: 100%;
	padding-bottom:2.5%;
	margin-top:2.5%;
}
.sideInner button{
    border:none;
    background:transparent;
	height:5%;
	width:15%;
}
.content_inner_wrapper {
    font-family: Times New Roman;
	Color: #ffffff;
	font-size:32px;
	text-indent:20px;
}
.content_inner_wrapper img{
    float:right;
	border:2px;
	border-style:solid;
	border-color:white;
}
.copyright{
    display:block;
    text-align: center;
    font-family: sans-serif;	
}

.product_table {
    font-size:15px;
}
table , th, td {
    border:1px solid black;
}

any help would be greatly appreciated, I always like to learn more and there has to be something that I didn’t learn quite right here.


#2

here’s an image of it after I go to the developer tools