Bootstrap page Overflow-x hidden, one element on page on IOS still scrolls left and right
<p>I want my cordova app to look less like a web app and more like a real app by eliminating left and right scroll. </p>

<p>I've set the overflow-x property to hidden on the html and body tags, and that works for all but the page below, which scrolls left and right but shouldn't.  </p>

<p>Have I misconstructed the grid? I've tried to apply the "overlow-x: hidden" property to an enclosing div instead of the body and html as suggested elsewhere, tried applying the property to the individual divs, attempted limiting width on the divs. I've tried changing the html position to fixed (which fixes the left-right scroll but also stops up down which I need). You <a href="http://www.brian-fitzgerald.net/i-ching/i/doodle.html" rel="nofollow">can view the page below on an iOS device to see the behaviour here</a>. Which of my lousy skillsets -- css, html, or bootstrap -- is letting me down here?</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html lang="en" style="position: relative; min-height: 100%;"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8" /&gt; 
        &lt;title&gt;
            My Awesome Title
        &lt;/title&gt;
        &lt;meta name="generator" content="BBEdit 11.0" /&gt; 

        &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt; &lt;link rel="stylesheet" href="css/entypo.min.css"&gt; 
        &lt;script type="text/javascript" src="scripts/jquery-2.0.3.min.js"&gt;
        &lt;/script&gt;
        &lt;script type="text/javascript" src="scripts/bootstrap.min.js"&gt;
        &lt;/script&gt;
        &lt;script type="text/javascript" src="scripts/bootbox.min.js"&gt;
        &lt;/script&gt;
        &lt;style&gt;
            html, body {
            overflow-x: hidden !important;
            }
        &lt;/style&gt;
        &lt;meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' /&gt; 
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-md-6 col-md-offset-3" style="background-color:#F8F8F8;"&gt;
                    &lt;h2 class="text-center"&gt;
                        My Awesome Title
                    &lt;/h2&gt;
                    &lt;br /&gt; 
                    &lt;div id="hexpix" class="center-block"&gt;
                        &lt;br /&gt;&lt;br /&gt; 
                        &lt;div id="hexpixdiv"&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
&lt;!-- Alert Space --&gt;
                    &lt;div id="AlertSpace" class="center-block" style="text-align:center; width:75%"&gt;
                    &lt;/div&gt;
                    &lt;br /&gt; 
&lt;!-- Hex Content Space for text  --&gt;
                    &lt;div id="hexindex" class="text-center"&gt;
                    &lt;/div&gt;
&lt;!-- hexindex close --&gt;
                    &lt;div id="hexcontent" class="text-center"&gt;
                    &lt;!-- 
    &lt;p&gt;
                            Blah blah this text should NOT scroll left and right because overflow-x is set to hidden but it slides back and forth like a hotplate on butter. Why, people, Why?
                            &lt;p&gt;
 --&gt;

                    &lt;/div&gt;
&lt;!-- hexcontent close --&gt;
                    &lt;div id='HelpButton'&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
&lt;!-- Column class close--&gt;
            &lt;/div&gt;
&lt;!-- Row class close--&gt;
            &lt;br /&gt; 
        &lt;/div&gt;
&lt;!--Container close--&gt;
        &lt;div id="sharestrip" style="position: absolute; bottom:40px; width:100%; height:10px;"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-2 text-center"&gt;
                    &lt;a href="javascript:void(0)" class="Reddit"&gt;
                        &lt;span&gt;
                        &lt;/span&gt;
                    &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-2 text-center"&gt;
                    &lt;a href="javascript:void(0)" class="SMS"&gt;
                        &lt;span class="icon-export"&gt;
                        &lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-2 text-center"&gt;
                    &lt;a href="javascript:void(0)" class="Email"&gt;
                        &lt;span class="icon-gmail"&gt;
                        &lt;/span&gt;
                    &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-2 text-center"&gt;
                    &lt;a href="javascript:void(0)" class="Twitter"&gt;
                        &lt;span class="icon-twitter"&gt;
                        &lt;/span&gt;
                    &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-2 text-center"&gt;
                    &lt;a href="javascript:void(0)" class="Facebook"&gt;
                        &lt;span class="icon-facebook"&gt;
                        &lt;/span&gt;
                    &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-2 text-center"&gt;
                    &lt;a href="javascript:void(0)" class="tumblr"&gt;
                        &lt;span&gt;
                        &lt;/span&gt;
                    &lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
&lt;!-- Row --&gt;
        &lt;/div&gt;
&lt;!-- Sharestrip --&gt;
        &lt;div id="footer" style="position: absolute;
  bottom: 0;
  width: 100%;  height: 20px;"&gt;
&lt;!-- See hex.css for custom css on this --&gt;
            &lt;div class="col-xs-12 navbar-inverse navbar-fixed-bottom"&gt;
                &lt;div class="container"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col-xs-3 text-center"&gt;
                            &lt;a href="javascript:void(0)"&gt;
                                &lt;span class="nav-link"&gt;
                                &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                        &lt;div class="col-xs-2 text-center"&gt;
                            &lt;a href="javascript:void(0)" 
                            &lt;span class="nav-link"&gt;
                                1
                            &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                        &lt;div class="col-xs-2 text-center"&gt;
                            &lt;a href="javascript:void(0)"&gt;
                                &lt;span class="nav-link"&gt;
                                    2
                                &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                        &lt;div class="col-xs-2 text-center"&gt;
                            &lt;a href="javascript:void(0)"&gt;
                                &lt;span class="nav-link"&gt;
                                    3
                                &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                        &lt;div class="col-xs-3 text-center"&gt;
                            &lt;a href="javascript:void(0)"&gt;
                                &lt;span class="nav-link"&gt;
                                &lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
&lt;!-- End Row --&gt;
                &lt;/div&gt;
&lt;!-- End Container --&gt;
            &lt;/div&gt;
&lt;!-- End Navbar --&gt;
        &lt;/div&gt;
&lt;!-- End Footer --&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>