CSS Span forcing page to be wider it should be - css

Question

The error specifically is that the span element has a width of 900 pixels and it forces the page to scroll horizontally due to it extending so far at smaller screen sizes. I tried using the overflow: hidden property but that does not stop the scrolling.
The reason why I need 900 pixels is so my text and borders are centered and my border doesn't split into two parts. In addition, this text is over a carousel slider of images. The error looks as such:
http://i.imgur.com/iAd16ml.png
My goal is to crop the page's width where the element overextends at. This is my code:
`
#title-display{
vertical-align: middle;
text-align: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
margin: -40px 0 0 -450px;
}
#title-display span{
width: 900px;
float: left;
position: absolute;
}
#title-display h1 {
display: inline;
text-transform: uppercase;
border-width: 8px;
border-style: solid;
border-color: white;
padding: 10px;
color: white;
font-size: 4vw;
}
`
I use margin: -40px 0 0 -450px; to center the text.
Here is some html in case:
<div id="title-display">
<span>
<h1><strong>Adrian's Workflow<strong></h1>
<p class="kicker">Designer // Programmer // Youtuber</p>
</span>
</div>

Answer 1

You could position the #title-display element at 50%, 50% then use transform: translate(-50%, -50%) to offset it by half its width and height regardless of its actual size. Like so.
body {background:#666;}
#title-display{
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align:center;
}
#title-display h1 {
text-transform: uppercase;
border-width: 8px;
border-style: solid;
border-color: white;
padding: 10px;
color: white;
font-size: 4vw;
white-space: nowrap;
}
<header id="title-display">
<h1><strong>Adrian's Workflow</strong></h1>
<p class="kicker">Designer // Programmer // Youtuber</p>
</header>