How can I allow the user to switch to page dark theme without using any third-party libraries? (This question answers provide only external libraries, but I want to do it without them.)
:root {
--bg-color: #cfd8dc;
--text-color: #212121;
}
[data-theme="dark"] {
--bg-color: #263238;
--text-color: #e0e0e0;
}
body {
color: var(--text-color);
background-color: var(--bg-color);
font-family: "Playfair Display";
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
.toggle-button {
-webkit-appearance: none;
outline: none;
width: 200px;
height: 100px;
background-color: #212121;
border-radius: 50px;
position: relative;
transition: .4s;
}
.toggle-button:before{
content: "";
position: absolute;
height: 100px;
width: 100px;
border-radius: 50px;
top: 0;
bottom: 0;
background-color: #bdbdbd;
transition: .4s;
}
.toggle-button:checked {
background-color: #bdbdbd;
}
.toggle-button:checked:before {
transform: translate(100%);
background-color: #212121;
transition: .4s;
}
<script>
const toggleSwitch = document.querySelector('.toggle-button');
function switchTheme(e) {
if(e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>
<nav>
<h1>Light Theme/Dark Theme Selector</h1>
</nav>
<div class="container">
<h2 style="margin-right:20px">Light</h2>
<input type="checkbox" class="toggle-button">
<h2 style="margin-left:20px;">Dark</h2>
</div>
If you want it to allow two designs of the web, use HTML class on html node:
function makeDark() {
document.body.parentNode.classList.remove("light")
document.body.parentNode.classList.add("dark")
}
function makeLight() {
document.body.parentNode.classList.add("light")
document.body.parentNode.classList.remove("dark")
}
.dark {
color: #fff;
background: #012;
}
.light {
color: #000;
background: #def;
}
.dark input {
appearance: none;
background: #000;
color: #fff;
}
<!doctype html>
<html class="dark" lang="en">
<head>
<meta charset=utf8>
<title>Foo</title>
</head>
<body>
<p>Some text</p>
<input value=input text>
<button onclick=makeDark()>Dark</button>
<button onclick=makeLight()>Light</button>
</body>
</html>
You then would also want to store the status in a cookie.
I want to separate the text styling from my header and body. How can I achieve this? I also want to keep the text in the heading inside my hero/background. I also need to add the appropriate media queries or flex's I assume? I am new to coding so please be weary that I am unfamiliar with all the terminology and coding elements. I am in coding bootcamp. I appreciate your help and tips.
* {
margin:0;
padding: 0;
}
/* Header Start */
#vanta-canvas {
width: 100vw;
height: 50vh;
}
.inner_header {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
top: 75px;
}
.flex {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-content: normal;
}
.highlight {
color: blue;
font-family: cursive;
-webkit-font-smoothing: antialiased;
}
body {
color: #fff;
font-family: cursive;
-webkit-font-smoothing: antialiased;
font-size: 25px;
background-color: #b4b4b4;
}
button {
background-color: transparent;
border-radius: 45% 3px;
color: #b4b4b4;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
margin: 0 auto;
text-align: center;
position: relative;
top: 90px;
-webkit-font-smoothing: antialiased;
transition: all 0.3s;
}
button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}
button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
}
button:hover, button:focus{
background-color: grey;
color: blue;
}
button:hover span {
padding-right: 25px;
}
button:hover span:after{
opacity: 1;
right: 0;
}
/* Header End */
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css" >
</head>
<body>
<div id="vanta-canvas">
<header>
<h1 class="inner_header" class="flex">
Hello, I'm
<span class="highlight">Brian Mojica.</span>
<br>
I'm a full-stack web develop.
</h1>
<button class="flex" style="vertical-align:middle"><span>
View My Work
</span></button>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 100.00,
minWidth: 100.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x102
})
</script>
</div>
<nav>
Test
</nav>
</body>
</html>
If what you want is a line divider, you can use the <hr> tag.
There are different style attributes you can add, too.
<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">
I hope this helps.
Edit:
Sorry, I didn't read your question close enough.
You can add
header {
(css)
}
Just like you have
body {
(css)
}
Edited:
I have a tooltip icon that when you hover over it brings up a box with information which is fine. However, I also want this to underline text inside the contents of a span tag but I can't seem to apply the css to do both I can only seem to get it to do one or the other.
Below is the code for the tooltip icon:
SCSS
.tooltip-region {
text-align: center;
background-color: blue;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
z-index: 8;
margin-left: 10px;
margin-top: 5px;
}
.tooltip-region::before {
content: '?';
font-weight: bold;
color: #fff;
}
.tooltip-region:hover p{
display: block;
transform-origin: 100% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.tooltip-region p{
display: none;
text-align: left;
background-color: blue;
padding: 20px;
width: 200px;
position: relative;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
left: -4px;
color: #fff;
font-size: 13px;
line-height: 1.4;
font-size: 16px;
font-family: sans-serif;
}
.tooltip-region p::before {
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color: blue;
left:10px;
top:-12px;
}
.tooltip-region p::after {
width:100%;
height:40px;
content:'';
position: relative;
top:-40px;
left:0;
}
html
<div class="grid-container">
<form action="#">
<div class="flexrow">
<div class="tooltip-region">
<p>Text</p>
</div>
</div>
</form>
</div>
The code for the span I want to highlight is this:
html
<div class="grid-item-2">
<pre id="terraCode">
region = "<span id="regionList" class="regionListUnderline"></span>"
</pre>
</div>
I have JavaScript code that autofills the content of the span which is why the code above has no text in it.
But the css I want to apply to the contents of the span when I hover over the tooltip is this:
SCSS
.regionListUnderline:hover {
border-bottom: 1px dotted black;
}
If anyone can see how I can apply the dotted line to the contents of the span when I hover over the tooltip icon would be very much appreciated!
Thanks
You can update the style via JavaScript. Therefore you would have to add this to your script (make sure that the dom content has loaded):
const handleMouseOver = () => {
const el = document.getElementById("regionList");
el.style.borderBottom = "1px dotted black";
};
const handleMouseLeave = () => {
const el = document.getElementById("regionList");
el.style.borderBottom = "none";
};
const [tooltip] = document.getElementsByClassName("tooltip-region");
tooltip.addEventListener("mouseover", handleMouseOver);
tooltip.addEventListener("mouseleave", handleMouseLeave);
This will only work if you have one element with the class tooltip-reqion because the code targets the first of occurance. If you have several this would need more logic.
So i made a Watchlist which is actually just a picture gallery and a menu right now. but on the second, the bigger screen the pictures are overlaying my menu.
https://imgur.com/a/FUycbCo
well i think that its because i used px instead of % or smth like that so i tried changing it but the problem is finding out where. some of the tags dont even work with % for some reason. also im not even sure that thats the problem. thats just a guess from me.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
<script>
var untermenu = document.getElementsByClassName("untermenu");
var i;
for (i = 0; i < untermenu.length; i++)
{
untermenu[i].addEventListener("click", function()
{
this.classList.toggle("active");
var untermenuContent = this.nextElementSibling;
if (untermenuContent.style.display === "block")
{
untermenuContent.style.display = "none";
}
else
{
untermenuContent.style.display = "block";
}
});
}
</script>
</body>
</html>
CSS:
body
{
background-color: #e2e2e0;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
i expect it to look nice
it doesnt look nice.
I would suggest you to post the whole HTML and CSS somewhere here or maybe on share a codepen, so that we can debug your code.
Also, I would suggest you to use grid and flex for making layouts for your website. For example I can see that your design structure can we implemented using basic grid and flex . The implementation in your case would be basic and it would be a good start for you. Consider learning them.
I have made changes in your code, added flex and grid. I have also implimented a responsiveness code, so that if the screen size reduces things still look good.
https://codepen.io/bhanusinghR/pen/LYPbazK?editors=1100
Code used:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="body-wrapper">
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
</div>
</div>
CSS
body
{
background-color: #e2e2e0;
padding:0px;
margin:0px;
}
.body-wrapper{
display: grid;
grid-template-columns: 18% auto;
grid-template-rows:auto;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
min-width: 100%;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
height: 100vh;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
#media only screen and (max-width: 600px) {
.body-wrapper {
display: flex;
flex-direction: column;
}
.menu {
height:100%;
padding-top: 0px;
display: flex;
}
}
I have created your layout using basic simple use of grid and flex.
I'm trying to center my webpage with
.wrapper {
display: flex;
align-items: stretch;
background: #fafafa;
/*max-width: 1520px; */
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
text-align: left;
width: 960px;
margin: 0 auto;
}
From what I understand, the last two lines should center it, but the page is still glued to the left. All the content is inside the wrapper, and I've checked my HTML and CSS code with https://validator.w3.org so I don't think it can be incorrect tags.
Am I missing something?
Full code for the page is here: HTML CSS
Any help is much appreciated!
Replace your .wrapper css with below one
.wrapper {
display: flex;
background: #fafafa;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
max-width: 960px;
margin: auto;
position: absolute;
left: 0;
right: 0;
}
Or another solution is set margin: auto; to body
I hope this will help you
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Georgia', serif;
background-image: url("path-to-stripe.png");
max-width: 960px;
/**background: #fafafa; **/
}
p {
font-family: '{Poppins}',
sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 40px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/*
div.wrapper{
display: flex;
align-items: stretch;
max-width : auto ;
position : center;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
background: #fafafa;
padding-left: 10px;
padding-right: 10px;
}
*/
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
background: #fafafa;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
max-width: 960px;
margin: auto;
position: absolute;
left: 0;
right: 0;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #082e59;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 2.9);
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #082e59;
}
#sidebar ul.components {
padding: 30px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #7192b7;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #082e59;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #082e59 !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MAP STYLES
----------------------------------------------------- */
#container1 {
display: block;
max-width: 1200px;
min-height: 505px;
position: auto;
/* height: 475px; position: center;*/
align-items: stretch;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>NEA SCA Onboarding</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<p style="text-align:center;"><img src="stateheader.png" alt="div" width="100px" align="middle" /></p>
<h3 style="text-align:center;">Onboarding</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
Compare By
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Population</li>
<li>Fertility Rate</li>
<li>Health Expenses (%GDP)</li>
<li>Military Expenses (%GDP)</li>
<li>Education Expenses (%GDP)</li>
</ul>
</li>
<li class="active">
About This Tool
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>View data source</li>
<li>NEA/SCA Home</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="fa fa-align-justify"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Near East Asia (NEA)</li>
<li>South Central Asia (SCA)</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-default">
<h2>Near East Asia Region</h2>
<p>This tool uses data from the CIA World Factbook to compare different countries in your region.</p>
<!-- MAP CODE STARTS HERE -->
<div id="container1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>
<script>
// example data from server
var series = [
["DZA", 75],
["EGY", 43],
["IRN", 50],
["IRQ", 88],
["ISR", 21],
["JOR", 43],
["KWT", 21],
["LBN", 19],
["LBY", 60],
["MAR", 4],
["OMN", 44],
["QAT", 44],
["SAU", 44],
["SYR", 44],
["TUN", 44],
["ARE", 44],
["YEM", 38]
];
// Datamaps expect data in format:
// { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
// "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
var dataset = {};
// We need to colorize every country based on "numberOfWhatever"
// colors should be uniq for every value.
// For this purpose we create palette(using min/max series-value)
var onlyValues = series.map(function(obj) {
return obj[1];
});
var minValue = Math.min.apply(null, onlyValues),
maxValue = Math.max.apply(null, onlyValues);
// create color palette function
// color can be whatever you wish
var paletteScale = d3.scale.linear()
.domain([minValue, maxValue])
.range(["#EFEFFF", "#02386F"]); // blue color
// fill dataset in appropriate format
series.forEach(function(item) { //
// item example value ["USA", 70]
var iso = item[0],
value = item[1];
dataset[iso] = {
numberOfThings: value,
fillColor: paletteScale(value)
};
});
// render map
var map = new Datamap({
element: document.getElementById('container1'),
projection: 'mercator', // big world map
// countries don't listed in dataset will be painted with this color
fills: {
defaultFill: '#F5F5F5'
},
data: dataset,
setProjection: function(element) {
var projection = d3.geo.equirectangular()
.center([37.4, 25.7])
.rotate([4.4, 0])
.scale(450)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
.projection(projection);
return {
path: path,
projection: projection
};
},
geographyConfig: {
borderColor: '#DEDEDE',
highlightBorderWidth: 1,
// don't change color on mouse hover
highlightFillColor: function(geo) {
return geo['fillColor'] || '#F5F5F5';
},
// only change border
highlightBorderColor: '#B7B7B7',
// show desired information in tooltip
popupTemplate: function(geo, data) {
// don't show tooltip if country don't present in dataset
if (!data) {
return;
}
// tooltip content
return ['<div class="hoverinfo">',
'<strong>', geo.properties.name, '</strong>',
'<br>Count: <strong>', data.numberOfThings, '</strong>',
'</div>'
].join('');
}
}
});
map.legend();
</script>
</nav>
</div>
<!--MAP CODE ENDS HERE -->
</div>
<!--close content div-->
<!--<p style="text-align:center;"><img src = "dos_divider.png" alt="div" align = "middle"/><p> -->
</div>
<!--close wrapper div> -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
If I'm understanding correctly, you want your content to be centered. Try this css change by adding margin: auto to the #content div:
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
margin: auto;
}
The problem is that you've set up a fixed max-width of 960px to the body element, which is preventing your wrapper to work. Remove it and it'll be fine.