Centered Wrapper Div - html

Question

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!

Answer 1

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>

Answer 2

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;
}

Answer 3

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.