Page width wider than viewport, blank space to the right

Question

The width of my page is too long to the right. I don't know what is making it unsymmetrical. It probably is the many "position:relative"s that I put on it in order to make things beautiful and aligned since I'm not a masted of coding to do it any other way.

Here's how it looks like to me:

Print1 Print2

Here are my codes:

 <script src="jQueryUI/external/jquery/jquery.js"></script> <script src="jQueryUI/jquery-ui.js"></script> <script src="jQueryUI/jquery-ui.css"></script> <script> $(function() { $( ".draggable" ).draggable({ axis: 'x', containment: [-234,0,450,0] }); }); </script> <script> $( "*", document.body ).click(function( event ) { var offset = $( "#circle" ).offset(); event.stopPropagation(); var conta = (offset.left - 752)/3.42; var posFinal = Math.round( conta ); $( "#luc" ).text( posFinal + "%" ); }); </script> 

 .draggable { width: 700px; height: 0px; margin: 0px auto; position: relative; } #bar { width: 350px; height: 12px; background-color: #ff0a00; border-right: 350px solid #00b4ff; margin: 0px auto; border-radius: 5px; } #circle { position: relative; top: -15px; width: 18px; height: 18px; border-radius: 50%; background: black; margin: 0px auto; } #discordo { position: relative; top: 65px; left: -386px; font-weight: bold; } #concordo { position: relative; top: 31.8px; left: 390px; font-weight: bold; } #organizado { position: relative; top: -70px; } 

 <form method="post" action="x.php" id="questions"> <h3>Pergunta 1</h3> <p>Maconha deveria ser legalizada para uso recreacional</p> <div id="organizado"> <p id="discordo">Discordo</p> <p id="concordo">Concordo</p> <div id="bar"> </div> <div class="draggable ui-widget-content"> <div id="circle"> </div> </div> <div> </div> <p id="luc"></p> 

Answer 1

Not enough html and css code to determine whats causing this, however try adding overflow-x:hidden to the whole document by putting the following in your css file:

html, body {
    overflow-x:hidden;
}

The overflow property specifies what happens if content overflows an element's box. Setting it to hidden will clip all that excess space and make it invisible. overflow-x will stop you from being able to scroll horizontally