CSS issue

HTML

<body>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <!-- Add your site or application content here -->
    <div id="navbar">	<a href="#home">
               		<object data="img/iscreeFixlogo-03.svg" class="logo"> </object>
               </a>
	<a href="#contactus"><button class="contact_us">Contact Us</button></a>

    </div>
    <div id="home">
        <p class="homeCopy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mag</p>
    </div>
    <div id="expert">
        <!--<div class="expertcontent">-->
         <h1 id="experthline"> WE ARE EXPERTS</h1>

        <p id="expertcopy">We have all the necessary tools and expertise needed to solve your problem.</p>
        <!--</div>-->
        <div class="experttools">
            <object data="img/iphone5s.svg" class="iphone5s"></object>
            <img src="img/precision1.png" alt="a Small precision screw driver" class="precision1">
            <img src="img/precision2.png" alt="a Medium sized precision screw driver" class="precision2">
            <img src="img/precision3.png" alt="a huge sized precision screw driver" class="precision3">
            <img src="img/orTool1.png" alt="an orange colored tool to open with precision" class="ortool1">
            <img src="img/orTool2.png" alt="an orange colored tool to open with precision" class="ortool2">
            <img src="img/suctioncap.png" alt="a suction cap to open the screen precisely" class="suctioncap">
            <img src="img/greenpick.png" alt="green colored guitar pick used as a holder" class="greenpick">
            <img src="img/redpick.png" alt="red colored guitar pick used as a holder" class="redpick">
        </div>
    </div>
    <div id="character">
        <!--<div class="charactercontent">-->
         <h1...

CSS

body {
     overflow-y: none;
 }
 body, a, button {
     font-family:'Myriad Pro', arial, sans-serif;
 }
 /*The First : Home Page*/
 #home {
     width: 100%;
     height: 786px;
     background: #ff9900 url(../img/bg1.jpg) no-repeat 0% 14%;
     text-align: center;
     background-attachment: fixed;
 }
 p.homeCopy {
     font:'Myriad Pro Light';
     color: white;
     margin: 0px;
     position: absolute;
     bottom: 40%;
     padding-left: 15%;
     padding-right: 15%;
     font-size: 2em;
     text-shadow: 0px 5px 13px #000000;
     font-weight: 100;
 }
 .navbar a {
     cursor:pointer;
 }
 object.logo {
     width: 205px;
     position: fixed;
     left: 3%;
     margin-top: 3%;
 }
 .contact_us {
     position: fixed;
     right: 3%;
     margin-top: 2%;
     padding: 20px 60px 45px 60px;
     height: 9%;
     background-color: transparent;
     border: 2px solid white;
     border-radius: 10px;
     color: white;
     font-size: 1.5em;
     z-index: 100;
     outline: none;
 }
 .contact_us:hover {
     transition: all 0.3s cubic-bezier(1, .01, 0, .99);
     background-color: #ff5500;
     box-shadow: 0px 1px 10px #000000;
     color: white;
     border-color: #ff5500;
 }
 /*page 2 expert*/
 #expert {
     width: 100%;
     height: 786px;
     text-align: center;
     background-color: #CCC ;
 }
 .expertcontent {
     position: relative;
     top: 15%;
 }
 #experthline {
     position: relative;
     top: 16%;
     margin: 0;
     font-weight: 400;
     font-size: 2.3em;
     color: #371b2c;
 }
 #expertcopy {
     position: relative;
     top: 56%;
     font-size: 2.0em;
     font-weight: 100;
     padding: 0px 22% 0 22%;
 }
 object.iphone5s {
     width: 143px;
     position: relative;
     right: 243px;
 }
 img.precision1 {
     width: 16px;
     position: relative;
     bottom: 111px;
     right: 115px;
 }
 img.precision2 {
     width: 20px;
     position: relative;
     bottom: 111px;
     right: 115px;
 }
 img.precision3 {
     width: 20px;
    ...