Scrollbar offset
How to prevent any offset from a scrollbar
HTML
<body>
<div id="wrapper">
<aside class="displayed">
<img src="resources/images/self.jpg" alt="self" /> <address>
<strong> XXX </strong> <br />
21 ans <br />
<em class="email"> XXX </em> <br />
<em> <a href="http://XXX"> XXX </a></em>
</address>
<h1> Développeur Informatique </h1>
</aside>
<div class="main">
<section> <a href="#educ" data-target="education-content" class="extender"> <h2> Formation </h2> </a>
<div class="content education-content">
<ul class="multiline-list left-margin">
<li> <span class="date"> 2013 - 2015 </span>
<br /> <span class="diploma"> Diplôme de Bachelor en Science de l'Ingénieur </span>
<br /> <span class="comment"> 90 ects validés (3 semestres)</span>
<br /> <span class="location"> ENSEIRB-MATMECA, Talence</span>
<br />
</li>
<li> <span class="date"> 2011-2013 </span>
<br /> <span class="diploma"> DUT Informatique</span>
<br /> <span class="comment"> 5ème de promotion </span>
<br /> <span class="location"> IUT de Bordeaux I, Gradignan</span>
<br />
</li>
<li> <span class="date"> 2011 </span>
<br /> <span class="diploma"> Baccalauréat Scientifique</span>
<br /> <span class="comment"> Section Européenne <br />
Mention Assez Bien</span>
<br /> <span class="location"> Lycée Jay de Beaufort, Périgueux</span>
<br />
</li>
</ul>
</div>
</section>
<section> <a...
CSS
/******************/
/****** BASE ******/
/******************/
* {
color: rgb(100, 100, 100);
font-family: Roboto, sans-serif;
}
html {
height: 100%;
}
body {
background: rgb(25, 25, 25);
}
a {
color: rgb(150, 150, 150);
text-decoration: none;
}
a:hover {
font-weight: bold;
}
.email {
unicode-bidi: bidi-override;
direction: rtl;
}
#wrapper {
box-sizing: border-box;
margin: 0 auto;
max-width: 960px;
position: relative;
}
/********************/
/****** LAYOUT ******/
/********************/
.left-align {
padding-left: 40px;
}
/******************/
/****** MAIN ******/
/******************/
.main {
background: rgb(15, 15, 15) url("images/background.png") no-repeat 100% top;
box-sizing: border-box;
padding: 20px;
}
/****** ASIDE ******/
aside {
background-color: rgb(15, 15, 15);
box-sizing: border-box;
padding: 20px;
width: 250px;
}
aside.displayed {
margin-left: -260px;
position: fixed;
}
aside img {
box-sizing: border-box;
display: block;
height: 200px;
width: 200px;
margin: 0 auto;
}
address {
font-style: normal;
line-height: 1.2em;
margin-top: 20px;
}
address strong {
color: rgb(0, 204, 204);
display: block;
font-weight: bold;
font-size: 1.5em;
text-align: center;
}
address em {
font-style: normal;
}
address a {
display: block;
font-size: 1.2em;
padding: 10px;
text-align: center;
}
h1 {
color: rgb(0, 175, 100);
display: block;
font-size: 1.5em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
/****** SECTIONS ******/
h2 {
color: rgb(0, 204, 204);
display: inline-block;
font-size: 1.5em;
font-weight: bold;
margin: 0 0 20px;
}
.content {
margin-bottom: 15px;
}
ul {
list-style: none;
margin: 0;
}
.multiline-list > li:nth-child(n+2) {
margin-top: 1.2em;
}
/*** education & work experience ***/
.date {
color: rgb(0,...
JavaScript
function onReady() {
/*** extendable sections ***/
$(".extender").click(function () {
var target = $(this).attr('data-target');
$('.' + target).slideToggle();
});
}
$(document).ready(onReady);