我是网站开发的新手，需要一些浏览器大小的帮助。当我在Safari上全屏时，我的代码工作得很好。但是，当我缩小浏览器的大小时，元素会相互重叠。
我尝试使用这个包装器，因为它在我以前的网站上运行并且它可以工作，但它在这个站点中不起作用。
wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
以下是我正在处理的当前网站的代码。
请忽略添加的评论。
我的片段：
/*********** Color Palette ***********/
.dark-primary-color {
background: #F57C00;
}
/* Darker Orange */
.default-primary-color {
background: #FF9800;
}
/* Lighter Orange */
.light-primary-color {
background: #FFE0B2;
}
/* Peach Orange */
.accent-color {
background: #448AFF;
}
/* Blue */
.primary-text-color {
color: #212121;
}
/* Black */
.secondary-text-color {
color: #727272;
}
/* Grey */
.divider-color {
border-color: #B6B6B6;
}
/* Light Grey */
/*********** General ***********/
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
body {
/* This is the CSS for body */
overflow: hidden;
/* Overflow set to hidden. Any elements outside of the window will not be shown */
height: 100%;
/* Height set to 100% means the body will extend from the top of the window to the bottom */
max-height: 100%;
/* Maximum height is limited to 100% */
font-family: 'Montserrat', sans-serif;
/* Font used in body is Montserrat */
line-height: 1.5em;
/* Line spacing is set to 1.5em */
font-size: 18px;
/* Font size set to 18px */
}
hr {
/* This is the CSS for horizontal line */
border-color: #F57C00;
/* Color of horizontal line is dark orange */
}
h1 {
/* This is the CSS for Header 1 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 1 is Montserrat */
font-size: 70px;
/* Font size set to 70px */
font-weight: 500;
/* Font weight is set to 500 */
}
h2 {
/* This is the CSS for Header 2 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 2 is Montserrat */
font-size: 60px;
/* Font size set to 60px */
font-weight: 500;
/* Font weight is set to 500 */
}
h3 {
/* This is the CSS for Header 3 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 3 is Montserrat */
font-size: 50px;
/* Font size set to 50px */
font-weight: 500;
/* Font weight is set to 500 */
}
h4 {
/* This is the CSS for Header 4 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 4 is Montserrat */
font-size: 40px;
/* Font size set to 40px */
font-weight: 500;
/* Font weight is set to 500 */
}
p {
/* This is the CSS for Paragraph */
font-family: 'Montserrat', sans-serif;
/* Font used in paragraph is Montserrat */
font-size: 18px;
/* Font size is set to 18px */
font-weight: 400;
/* Font weight is set to 400 */
}
/*********** Header ***********/
#header {
/* This is the CSS for header */
position: absolute;
/* Position is set to absolute */
top: 0;
/* Top is set to 0. There is no spacing between the header and the top of the browser */
left: 0;
/* Left is set to 0. There is no spacing between the header and the left of the browser */
width: 100%;
/* Width is set to 100%. The width will stretch from the browser's left to the right */
height: 50px;
/* Height is set to 50px. The height of the header is 50pixels tall */
overflow: hidden;
/* Overflow is set to hidden. Any elements outside of the header will not be shown. No scrollbar will be added */
background: #F57C00;
/* Background color is set to dark orange */
}
.headerlogo {
/* This is the CSS for headerlogo */
position: absolute;
/* Position is set to absolute */
float: left;
/* Element will float to the left */
top: 13px;
/* Top is set to 13px. The spacing between the top of the parent and the headerlogo is 13pixels */
max-height: 40px;
/* Maximum height of headerlogo is 40px */
width: auto;
/* The width is set to auto. It will align proportionally to the height */
margin-left: 70px;
/* The spacing at the left outside of headerlogo is 70px */
font-family: 'Merienda', cursive;
/* Font used for headerlogo is Marienda */
font-size: 30px;
/* Font size used is 30px */
color: white;
/* Color of the headerlogo is set to white */
text-decoration: none;
/* */
}
header ul {
/* This is the CSS for header unordered list */
list-style-type: none;
/* */
margin: 0;
/* Margin is set to 0 */
padding: 0;
/* Padding is set to 0 */
display: inline;
/* */
}
header ul a {
/* This is the CSS for header unordered a? */
display: block;
float: right;
}
header ul li a {
display: block;
margin: 0 0 0 30px;
padding: 10px 20px;
background: transparent;
color: white;
text-decoration: none;
line-height: 0.2px;
}
header ul li a:hover {
background: transparent;
color: #727272;
opacity: 0.8;
}
.innertubeheader {
margin: 15px;
margin-right: 70px;
}
/*********** Main ***********/
main {
position: fixed;
top: 50px;
bottom: 40px;
left: 0;
right: 0;
overflow: auto;
background: #EFEFEF;
width: 100%;
}
.innertube {
margin: 15px;
}
.innertubeimg {
margin: 0.1px;
position: relative;
}
.jumbo {
z-index: 200;
position: absolute;
text-align: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 16%;
}
.jumboh1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 70px;
color: white;
}
.jumbop {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 20px;
color: white;
}
.container {
width: 80%;
margin: auto;
padding-left: 70px;
padding-right: 70px;
}
p {
color: #212121;
}
.colwrap {
position: relative;
float: left;
left: 0;
width: 100%;
}
.colleft {
position: relative;
float: left;
left: 0;
width: 46%;
padding-right: 5px;
}
.colright {
position: relative;
float: right;
right: 0;
width: 46%;
padding-left: 5px;
}
img {
max-width: 100%;
height: auto;
}
/*********** Footer ***********/
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
overflow: hidden;
background: #F57C00;
}
footer p {
color: white;
line-height: 10px;
}
.innertubefooter {
margin: 15px;
margin-left: 70px;
}
/* Right Navigation */
#nav {
position: absolute;
top: 50px;
bottom: 50px;
right: 0;
width: 00px;
overflow: auto;
background: #444;
}
.navlogo {
float: left;
max-height: 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: darkgreen;
text-decoration: none;
float: right;
}<!DOCTYPE html>
<html>
<head>
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merienda:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home | Pincello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="wrapper">
<header id="header">
<div class="innertubeheader">
<a href="" class="headerlogo">Pincello</a>
<ul>
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Higeo</a>
</li>
<li>
<a href="#">About Pincello</a>
</li>
<li>
<a href="#">Products</a>
</li>
</ul>
</div>
</header>
</div>
<main>
<div class="innertubeimg">
<div class="jumbo">
<h1 class="jumboh1">T E R R A ' S F I N E S T</h1>
<hr style="width:30%">
<p class="jumbop">P H O N E S | T A B L E T S | L A P T O P S</p>
</div>
<img alt="SJ" src="012_ISC_2012_Monday_IZ3A1945.jpg">
</div>
<div class="innertube">
<div class="container">
<h3 style="text-align:center; font-size:18px; color:#F57C00">Who we are?</h3>
<h3 style="text-align:center">THE MASSIVE PROJECT</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>What is Pincello?</b>
<hr>
<br>Pincello is the leading brand of today's generation when it comes to technology.
<br>
<br>We <b>NEVER</b> felt tired being a leader.
<br>
<br>As a leader, we strongly abide to our <b>Vision and Mission</b>.
<br>
<br>
<br>
<br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>Vision and Mission</b>
<hr>
<br><b>VISION:</b>
<br>To lead the current generation in the world of Information Technology.
<br>
<br><b>MISSION:</b>
<br>For the people, By the people.
<br>
<br>
<br>
<br>
</p>
</div>
</div>
<br>
<hr>
<br>
<h3 style="text-align:center; font-size:18px; color:#F57C00">Our Partner</h3>
<h3 style="text-align:center">HIGEO</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>TITLE</b>
<hr>
<br>BULLLSHIT
<br>
<br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>TITLE</b>
<hr>
<br>BULLSHIT
<br>
<br>
</p>
</div>
</div>
</div>
</div>
</main>
<footer id="footer">
<div class="innertubefooter">
<p class="text-left">Copyright 2015 Pincello. All rights reserved.</p>
</div>
</footer>
</body>
</html>
答案 0 :(得分：2)
也许这就是你所追求的。此方法将body的最小宽度设置为固定值，以便在重新调整窗口大小时，元素不会重叠。您必须水平滚动才能看到整个页面。
如果您想让整个网站响应，最好使用像bootstrap这样的框架，因为您有复杂的元素定位
将正文样式更改为
body { /* This is the CSS for body */
position: relative;
min-width: 900px;
/*overflow: hidden; Overflow set to hidden. Any elements outside of the window will not be shown */
height: 100%; /* Height set to 100% means the body will extend from the top of the window to the bottom */
max-height: 100%; /* Maximum height is limited to 100% */
font-family: 'Montserrat', sans-serif; /* Font used in body is Montserrat */
line-height: 1.5em; /* Line spacing is set to 1.5em */
font-size: 18px; /* Font size set to 18px */
}
和主要样式，
main {
top: 50px;
bottom: 40px;
left: 0;
right: 0;
overflow: auto;
background: #EFEFEF;
width: 100%;
min-width: 900px;
}
以下是演示结果的摘录
/*********** Color Palette ***********/
.dark-primary-color {
background: #F57C00;
}
/* Darker Orange */
.default-primary-color {
background: #FF9800;
}
/* Lighter Orange */
.light-primary-color {
background: #FFE0B2;
}
/* Peach Orange */
.accent-color {
background: #448AFF;
}
/* Blue */
.primary-text-color {
color: #212121;
}
/* Black */
.secondary-text-color {
color: #727272;
}
/* Grey */
.divider-color {
border-color: #B6B6B6;
}
/* Light Grey */
/*********** General ***********/
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
min-width: 960px;
height: 100%;
}
body {
/* This is the CSS for body */
position: relative;
min-width: 900px;
/*overflow: hidden; Overflow set to hidden. Any elements outside of the window will not be shown */
height: 100%;
/* Height set to 100% means the body will extend from the top of the window to the bottom */
max-height: 100%;
/* Maximum height is limited to 100% */
font-family: 'Montserrat', sans-serif;
/* Font used in body is Montserrat */
line-height: 1.5em;
/* Line spacing is set to 1.5em */
font-size: 18px;
/* Font size set to 18px */
}
hr {
/* This is the CSS for horizontal line */
border-color: #F57C00;
/* Color of horizontal line is dark orange */
}
h1 {
/* This is the CSS for Header 1 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 1 is Montserrat */
font-size: 70px;
/* Font size set to 70px */
font-weight: 500;
/* Font weight is set to 500 */
}
h2 {
/* This is the CSS for Header 2 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 2 is Montserrat */
font-size: 60px;
/* Font size set to 60px */
font-weight: 500;
/* Font weight is set to 500 */
}
h3 {
/* This is the CSS for Header 3 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 3 is Montserrat */
font-size: 50px;
/* Font size set to 50px */
font-weight: 500;
/* Font weight is set to 500 */
}
h4 {
/* This is the CSS for Header 4 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 4 is Montserrat */
font-size: 40px;
/* Font size set to 40px */
font-weight: 500;
/* Font weight is set to 500 */
}
p {
/* This is the CSS for Paragraph */
font-family: 'Montserrat', sans-serif;
/* Font used in paragraph is Montserrat */
font-size: 18px;
/* Font size is set to 18px */
font-weight: 400;
/* Font weight is set to 400 */
}
/*********** Header ***********/
#header {
/* This is the CSS for header */
position: absolute;
/* Position is set to absolute */
top: 0;
/* Top is set to 0. There is no spacing between the header and the top of the browser */
left: 0;
/* Left is set to 0. There is no spacing between the header and the left of the browser */
width: 100%;
/* Width is set to 100%. The width will stretch from the browser's left to the right */
height: 50px;
/* Height is set to 50px. The height of the header is 50pixels tall */
overflow: hidden;
/* Overflow is set to hidden. Any elements outside of the header will not be shown. No scrollbar will be added */
background: #F57C00;
/* Background color is set to dark orange */
}
.headerlogo {
/* This is the CSS for headerlogo */
position: absolute;
/* Position is set to absolute */
float: left;
/* Element will float to the left */
top: 13px;
/* Top is set to 13px. The spacing between the top of the parent and the headerlogo is 13pixels */
max-height: 40px;
/* Maximum height of headerlogo is 40px */
width: auto;
/* The width is set to auto. It will align proportionally to the height */
margin-left: 70px;
/* The spacing at the left outside of headerlogo is 70px */
font-family: 'Merienda', cursive;
/* Font used for headerlogo is Marienda */
font-size: 30px;
/* Font size used is 30px */
color: white;
/* Color of the headerlogo is set to white */
text-decoration: none;
/* */
}
header ul {
/* This is the CSS for header unordered list */
list-style-type: none;
/* */
margin: 0;
/* Margin is set to 0 */
padding: 0;
/* Padding is set to 0 */
display: inline;
/* */
}
header ul a {
/* This is the CSS for header unordered a? */
display: block;
float: right;
}
header ul li a {
display: block;
margin: 0 0 0 30px;
padding: 10px 20px;
background: transparent;
color: white;
text-decoration: none;
line-height: 0.2px;
}
header ul li a:hover {
background: transparent;
color: #727272;
opacity: 0.8;
}
.innertubeheader {
margin: 15px;
margin-right: 70px;
}
/*********** Main ***********/
main {
top: 50px;
bottom: 40px;
left: 0;
right: 0;
overflow: auto;
background: #EFEFEF;
width: 100%;
min-width: 900px;
}
.innertube {
margin: 15px;
}
.innertubeimg {
margin: 0.1px;
position: relative;
}
.jumbo {
z-index: 200;
position: absolute;
text-align: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 16%;
}
.jumboh1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 70px;
color: white;
}
.jumbop {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 20px;
color: white;
}
.container {
width: 80%;
margin: auto;
padding-left: 70px;
padding-right: 70px;
}
p {
color: #212121;
}
.colwrap {
position: relative;
float: left;
left: 0;
width: 100%;
}
.colleft {
position: relative;
float: left;
left: 0;
width: 46%;
padding-right: 5px;
}
.colright {
position: relative;
float: right;
right: 0;
width: 46%;
padding-left: 5px;
}
img {
max-width: 100%;
height: auto;
}
/*********** Footer ***********/
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
overflow: hidden;
background: #F57C00;
}
footer p {
color: white;
line-height: 10px;
}
.innertubefooter {
margin: 15px;
margin-left: 70px;
}
/* Right Navigation */
#nav {
position: absolute;
top: 50px;
bottom: 50px;
right: 0;
width: 00px;
overflow: auto;
background: #444;
}
.navlogo {
float: left;
max-height: 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: darkgreen;
text-decoration: none;
float: right;
}<!DOCTYPE html>
<html>
<head>
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merienda:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home | Pincello</title>
<link rel="stylesheet" type="text/css" href="public/main.css" />
</head>
<body>
<header id="header">
<div class="innertubeheader">
<a href="" class="headerlogo">Pincello</a>
<ul>
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Higeo</a>
</li>
<li>
<a href="#">About Pincello</a>
</li>
<li>
<a href="#">Products</a>
</li>
</ul>
</div>
</header>
</div>
<main>
<div class="innertubeimg">
<div class="jumbo">
<h1 class="jumboh1">T E R R A ' S F I N E S T</h1>
<hr style="width:30%">
<p class="jumbop">P H O N E S | T A B L E T S | L A P T O P S</p>
</div>
<img alt="SJ" src="012_ISC_2012_Monday_IZ3A1945.jpg">
</div>
<div class="innertube">
<div class="container">
<h3 style="text-align:center; font-size:18px; color:#F57C00">Who we are?</h3>
<h3 style="text-align:center">THE MASSIVE PROJECT</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>What is Pincello?</b>
<hr>
<br>Pincello is the leading brand of today's generation when it comes to technology.
<br>
<br>We <b>NEVER</b> felt tired being a leader.
<br>
<br>As a leader, we strongly abide to our <b>Vision and Mission</b>.
<br>
<br>
<br>
<br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>Vision and Mission</b>
<hr>
<br><b>VISION:</b>
<br>To lead the current generation in the world of Information Technology.
<br>
<br><b>MISSION:</b>
<br>For the people, By the people.
<br>
<br>
<br>
<br>
</p>
</div>
</div>
<br>
<hr>
<br>
<h3 style="text-align:center; font-size:18px; color:#F57C00">Our Partner</h3>
<h3 style="text-align:center">HIGEO</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>TITLE</b>
<hr>
<br>BULLLSHIT
<br>
<br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>TITLE</b>
<hr>
<br>BULLSHIT
<br>
<br>
</p>
</div>
</div>
</div>
</div>
</main>
<footer id="footer">
<div class="innertubefooter">
<p class="text-left">Copyright 2015 Pincello. All rights reserved.</p>
</div>
</footer>
</body>
</html>
答案 1 :(得分：1)
问题是你绝对定位.jumbo div，这有效地将其从页面流中取出（即内容将在其下方流动）。删除position: absolute属性，＆amp;事情将不再重叠。
修改
这是相关的块。
.jumbo {
z-index: 200;
text-align: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 16%;
}
我刚删除了position: absolute属性。
/*********** Color Palette ***********/
.dark-primary-color{
background: #F57C00;
} /* Darker Orange */
.default-primary-color {
background: #FF9800;
} /* Lighter Orange */
.light-primary-color {
background: #FFE0B2;
} /* Peach Orange */
.accent-color {
background: #448AFF;
} /* Blue */
.primary-text-color {
color: #212121;
} /* Black */
.secondary-text-color {
color: #727272;
} /* Grey */
.divider-color {
border-color: #B6B6B6;
} /* Light Grey */
/*********** General ***********/
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
body { /* This is the CSS for body */
overflow: hidden; /* Overflow set to hidden. Any elements outside of the window will not be shown */
height: 100%; /* Height set to 100% means the body will extend from the top of the window to the bottom */
max-height: 100%; /* Maximum height is limited to 100% */
font-family: 'Montserrat', sans-serif; /* Font used in body is Montserrat */
line-height: 1.5em; /* Line spacing is set to 1.5em */
font-size: 18px; /* Font size set to 18px */
}
hr { /* This is the CSS for horizontal line */
border-color: #F57C00; /* Color of horizontal line is dark orange */
}
h1 { /* This is the CSS for Header 1 */
font-family: 'Montserrat', sans-serif; /* Font used in header 1 is Montserrat */
font-size: 70px; /* Font size set to 70px */
font-weight: 500; /* Font weight is set to 500 */
}
h2 { /* This is the CSS for Header 2 */
font-family: 'Montserrat', sans-serif; /* Font used in header 2 is Montserrat */
font-size: 60px; /* Font size set to 60px */
font-weight: 500; /* Font weight is set to 500 */
}
h3 { /* This is the CSS for Header 3 */
font-family: 'Montserrat', sans-serif; /* Font used in header 3 is Montserrat */
font-size: 50px; /* Font size set to 50px */
font-weight: 500; /* Font weight is set to 500 */
}
h4 { /* This is the CSS for Header 4 */
font-family: 'Montserrat', sans-serif; /* Font used in header 4 is Montserrat */
font-size: 40px; /* Font size set to 40px */
font-weight: 500; /* Font weight is set to 500 */
}
p { /* This is the CSS for Paragraph */
font-family: 'Montserrat', sans-serif; /* Font used in paragraph is Montserrat */
font-size: 18px; /* Font size is set to 18px */
font-weight: 400; /* Font weight is set to 400 */
}
/*********** Header ***********/
#header { /* This is the CSS for header */
position: absolute; /* Position is set to absolute */
top: 0; /* Top is set to 0. There is no spacing between the header and the top of the browser */
left: 0; /* Left is set to 0. There is no spacing between the header and the left of the browser */
width: 100%; /* Width is set to 100%. The width will stretch from the browser's left to the right */
height: 50px; /* Height is set to 50px. The height of the header is 50pixels tall */
overflow: hidden; /* Overflow is set to hidden. Any elements outside of the header will not be shown. No scrollbar will be added */
background: #F57C00; /* Background color is set to dark orange */
}
.headerlogo { /* This is the CSS for headerlogo */
position: absolute; /* Position is set to absolute */
float: left; /* Element will float to the left */
top: 13px; /* Top is set to 13px. The spacing between the top of the parent and the headerlogo is 13pixels */
max-height: 40px; /* Maximum height of headerlogo is 40px */
width: auto; /* The width is set to auto. It will align proportionally to the height */
margin-left: 70px; /* The spacing at the left outside of headerlogo is 70px */
font-family: 'Merienda', cursive; /* Font used for headerlogo is Marienda */
font-size: 30px; /* Font size used is 30px */
color: white; /* Color of the headerlogo is set to white */
text-decoration: none; /* */
}
header ul { /* This is the CSS for header unordered list */
list-style-type: none; /* */
margin: 0; /* Margin is set to 0 */
padding: 0; /* Padding is set to 0 */
display: inline; /* */
}
header ul a { /* This is the CSS for header unordered a? */
display: block;
float: right;
}
header ul li a {
display: block;
margin: 0 0 0 30px;
padding: 10px 20px;
background: transparent;
color: white;
text-decoration: none;
line-height: 0.2px;
}
header ul li a:hover {
background: transparent;
color: #727272;
opacity: 0.8;
}
.innertubeheader {
margin: 15px;
margin-right: 70px;
}
/*********** Main ***********/
main {
position: fixed;
top: 50px;
bottom: 40px;
left: 0;
right: 0;
overflow: auto;
background: #EFEFEF;
width: 100%;
}
.innertube {
margin: 15px;
}
.innertubeimg {
margin: 0.1px;
position: relative;
}
.jumbo {
z-index: 200;
text-align: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 16%;
}
.jumboh1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 70px;
color: white;
}
.jumbop {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 20px;
color: white;
}
.container {
width: 80%;
margin: auto;
padding-left: 70px;
padding-right: 70px;
}
p {
color: #212121;
}
.colwrap {
position: relative;
float: left;
left: 0;
width: 100%;
}
.colleft {
position: relative;
float: left;
left: 0;
width: 46%;
padding-right: 5px;
}
.colright {
position: relative;
float: right;
right: 0;
width: 46%;
padding-left: 5px;
}
img {
max-width: 100%;
height: auto;
}
/*********** Footer ***********/
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
overflow: hidden;
background: #F57C00;
}
footer p {
color: white;
line-height: 10px;
}
.innertubefooter {
margin: 15px;
margin-left: 70px;
}
/* Right Navigation */
#nav {
position: absolute;
top: 50px;
bottom: 50px;
right: 0;
width: 00px;
overflow: auto;
background: #444;
}
.navlogo {
float: left;
max-height: 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: darkgreen;
text-decoration: none;
float: right;
}<!DOCTYPE html>
<html>
<head>
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merienda:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home | Pincello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="wrapper">
<header id="header">
<div class="innertubeheader">
<a href="" class="headerlogo">Pincello</a>
<ul>
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Higeo</a>
</li>
<li>
<a href="#">About Pincello</a>
</li>
<li>
<a href="#">Products</a>
</li>
</ul>
</div>
</header>
</div>
<main>
<div class="innertubeimg">
<div class="jumbo">
<h1 class="jumboh1">T E R R A ' S F I N E S T</h1>
<hr style="width:30%">
<p class="jumbop">P H O N E S | T A B L E T S | L A P T O P S</p>
</div>
<img alt="SJ" src="012_ISC_2012_Monday_IZ3A1945.jpg">
</div>
<div class="innertube">
<div class="container">
<h3 style="text-align:center; font-size:18px; color:#F57C00">Who we are?</h3>
<h3 style="text-align:center">THE MASSIVE PROJECT</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>What is Pincello?</b><hr><br>Pincello is the leading brand of today's generation when it comes to technology.<br><br>We <b>NEVER</b> felt tired being a leader.<br><br>As a leader, we strongly abide to our <b>Vision and Mission</b>.<br><br><br><br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>Vision and Mission</b><hr><br><b>VISION:</b><br>To lead the current generation in the world of Information Technology.<br><br><b>MISSION:</b><br>For the people, By the people.<br><br><br><br>
</p>
</div>
</div>
<br>
<hr>
<br>
<h3 style="text-align:center; font-size:18px; color:#F57C00">Our Partner</h3>
<h3 style="text-align:center">HIGEO</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>TITLE</b><hr><br>BULLLSHIT<br><br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>TITLE</b><hr><br>BULLSHIT<br><br>
</p>
</div>
</div>
</div>
</div>
</main>
<footer id="footer">
<div class="innertubefooter">
<p class="text-left">Copyright 2015 Pincello. All rights reserved.</p>
</div>
</footer>
</body>
</html>