I am struggling with unwanted horizontal scrolling on my webpage and am looking to create some space above the menus. I have provided a link to a JSFiddle where you can see the layout: http://jsfiddle.net/mount/m5upe9r6/1/
body {
margin: 0;
padding: 0;
width: 100%;
font: normal 12px/1.5em"Liberation sans", Arial, Helvetica, sans-serif;
}
html {
padding: 0;
margin: 0;
}
div {
width: 100%;
}
.header {
position: relative;
width: 100%;
height: 150px;
background: #1e5799;
/* Old browsers */
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 40%, #1e5799 100%, #7db9e8 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(40%, #2989d8), color-stop(100%, #1e5799), color-stop(100%, #7db9e8));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1e5799 0%, #2989d8 40%, #1e5799 100%, #7db9e8 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1e5799 0%, #2989d8 40%, #1e5799 100%, #7db9e8 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #1e5799 0%, #2989d8 40%, #1e5799 100%, #7db9e8 100%);
/* IE10+ */
background: linear-gradient(to right, #1e5799 0%, #2989d8 40%, #1e5799 100%, #7db9e8 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1);
/* IE6-9 */
}
.login {
margin: 0;
padding: 0px 0px 0 0;
text-align: right;
width: 40%;
position: absolute;
right: 0;
bottom: 0;
}
.ribbon {
background-color: #F70D1A;
overflow: hidden;
white-space: nowrap;
/* top left corner */
position: absolute;
left: -625px;
top: 40px;
/* 45 deg ccw rotation */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* shadow */
-webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
}
.ribbon a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 105.25%'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 0 0 5px #444;
}
.logo {
margin: 0px 0;
padding: 15px 0px 0px 130px;
cursor: pointer;
float: left;
}
.topmenu {
padding: 25px, 0px, 0px, 0px;
}
.topmenu ul {
list-style-type: none;
margin: 0;
padding: 25px, 0px, 0px, 0px;
text-align: center;
}
.topmenu ul li {
display: inline;
}
.topmenu ul li a {
display: inline;
margin: 0;
padding: 22px 16px;
font-size: 15px;
line-height: 17px;
font-weight: bold;
color: #0000A0;
text-decoration: none;
text-align: center;
}
.topmenu ul li.active a,
.topmenu ul li a:hover {
text-decoration: none;
color: ;
}<div class="main">
<div class="header">
<div class="ribbon">
<a href="#">BETA</a>
</div>
<!--end of robbon div -->
<div class="logo" class="unselectable">
<img src="image/DZB.png" style="width:220px;height:120px" alt="logo">
</div>
<!--end of logo div -->
<div class="login">
<button name="login" class="add">Login</button>
<button name="Enquiry" class="upload">Enquiry</button>
</div>
<!--end of login div -->
</div>
<!-- end of header div -->
<div class="topmenu">
<ul>
<li><a>Product</a>
</li>
<li><a>Contuct us</a>
</li>
</ul>
</div>
<!--end of Top menu div -->
<div class="slide">
</div>
<!-- end of slide div -->
</div>
<!-- end of main div -->