Blank space at bottom of page outside the html tags on mobile after giving a width that exceeds 100% to an element
<blockquote>
  <p>Honestly believing I must be the first to encounter this problem after
  searching the web for quite a bit, I decided to present this issue to
  you.</p>
</blockquote>

<h2>The issue</h2>

<p>The issue I am facing resembles a <em>"blank space"</em> that lives at the bottom of my page. It's only visible on mobile and I haven't been able to replicate the issue on desktop, however going into developer modus on chrome and visiting my website, I can see the problem.</p>

<p>When using the developer mode in chrome and checking all the elements, it becomes apparent that the <em>"blank space"</em> is <em>nothing</em>. It holds no information and it doesn't <em>seem</em> tied to any element.</p>

<p>However, after some digging it was found it the <em>"blank space"</em> only pops up after giving width to an element. And not just a width, but a width that exceeds the view-port.</p>

<p>Something else that caught my attention is that the height of this <em>"blank space"</em> is the same as the view-port height.</p>

<h2>What am I trying to accomplish</h2>

<p>You might wonder why I am setting a width exceeding the view-port, my reasoning for this is because I am trying to build a mobile(only) website that uses horizontal scrolling as a way to paginate between different content.</p>

<p>My goal is to accomplish this solely using css3 and html, no jQuery, no JavaScript and preferably not any ready-made plugins.</p>

<p>So far the <em>"horizontal scroll"</em> gives me the desired effect apart from the massive amount of white space it gives on the bottom of my page. I'd like to invest my time into trying to "fix" it rather than replacing it.</p>

<h2>Recreating the issue</h2>

<p>The easiest way to re-create my issue is to start off with a blank html file and give it the following elements:</p>

<pre><code>&lt;div id="wrapper"&gt; ... &lt;/div&gt;
</code></pre>

<p>And inside the wrapper put:</p>

<pre><code>&lt;div class="content"&gt;&lt;/div&gt;
&lt;div class="content"&gt;&lt;/div&gt;
</code></pre>

<p>Then in your css file put the following styles:</p>

<pre><code>body {
    margin: 0; padding: 0;
}

#wrapper {
    width: 200vw;
    height: 100vh;
}

.content {
    float: left;
    width: 100vw;
    height: 100vh;
}
</code></pre>

<p>And don't forget to include a meta tag in the <code>&lt;head&gt;&lt;/head&gt;</code> for the view-port:</p>

<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
</code></pre>

<p><strong>For a live example, please check <a href="https://jsfiddle.net/ehwshurz/" rel="nofollow noreferrer">my JSFiddle</a>.</strong></p>

<h2>Edit:</h2>

<p>Adding some screenshots of my chrome developer tool to visualize the issue.</p>

<p>See here the actual website content, as you can see all is like intended.
The width is <code>200vw</code> and height is <code>100vw</code>.
<a href="https://i.stack.imgur.com/tfkrx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tfkrx.png" alt="Visualization of the &quot;blank space&quot; issue. Normal website content."></a></p>

<p>See here the issue captured as a "blank space" like described in the OP.
Notice that the blank space stretched to twice the height of the <code>height: 100vh</code> as set in the css styling. Width stretched as far as the content, <code>width: 200vw</code>.
<a href="https://i.stack.imgur.com/3mNRM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3mNRM.png" alt="Visualization of the &quot;blank space&quot; issue. The &quot;blank space&quot; captured."></a></p>

<p><em>Chrome developer tools screen-size in device modus (<code>CTRL - SHIFT - M</code>) is 360x640 (width x height).</em></p>