I've done some changes kindly check whether they're correct or not
HTML
<div class="container" style="border:1px solid black">
<a href="#p2">Typefaces</a>
<div class="offscreen" style="border:1px solid black">
<div class="etc" style="border:1px solid black">
<p id="p2">Some paragraph text</p>
</div>
</div>
</div>
CSS
.container {
max-width: 2600px;
padding-left: 1em;
padding-right: 0em;
margin-left: auto;
margin-right: auto
}
.offscreen {
position: absolute;
right: -750px;
left: 100px
}
.etc {
width: 100px;
margin: 0 auto;
padding: 0 5%;
padding-top: 100px;
overflow: hidden;
}
.etc p {
max-width: 100px;
}
Here I've added html with borders which will help you know a little bit more about location of text. Once you're done please remove those style attributes from <div>
. In.offscreen if you'll do position to center then text will come to center or changing right and left of.offscreen can give you a better output.
I've verified in google chrome using jsfiddle. Kindly verify and let me know..