I'm in the process of developing a new website called WebSpace and I'm looking to extend the header background color to span from one end to the other. Currently, the layout appears like this:
I want to eliminate the unnecessary white space on the top, left, and right sides, preferably with a streamlined solution.
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/assets/style.css"/>
<link rel="stylesheet" href="/assets/layout.css"/>
<title>WebSpace</title>
</head>
<body>
<div class="row title">
<span class="title">WebSpace</span>
</div>
</body>
</html>
Check out the style.css file for additional information:
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,100&subset=cyrillic,cyrillic-ext,latin-ext,latin);
body {
font-family: 'Roboto', sans-serif;
}
span.title {
font-weight: 100;
font-size: 66px;
width: 100%;
float: left;
}
Take a look at the contents of my layout.css file as well:
body { overflow-x:hidden; !important}
html { width: 100%; }
div.row { width: 100%; }
div.span10 { width: 100%; }
div.span9 { width: 90%; }
div.span8 { width: 80%; }
div.span7 { width: 70%; }
div.span6 { width: 60%; }
div.span5 { width: 50%; }
div.span4 { width: 40%; }
div.span3 { width: 30%; }
div.span2 { width: 20%; }
div.span1 { width: 10%; }
/*Row Styles*/
div.title {
background-color: #F7D023;
height: 100px;
color: white;
position: absolute:
left: 0;
right: 0;
overflow-x:hidden; !important
}