Here I'll explain why you may face the problem, where your live page shows the elements differently as it is in the preview, e.g. the spacing that is not seen in the preview is shown on live page, e.g.:
Live
Preview
The main reason could be the fact that you've copied a generated code and pasted it in a file just as it is. The thing is, when you press the Code button (http://prntscr.com/l1n6cm) it doesn't show the whole HTML document but just a part of it.
So, in order to have a proper view you need to wrap the code inside the following values:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
THE COPIED CONTENT HERE
</body>
</html>
Another option is to open the view-source of the DragDropr page (Ctrl+U) and copy the content from there.
if you want to copy it into your file manually, you need to create a valid HTML document either by using the "template" shown above or by coping the content of the view-source of your DragDropr page (You can get a link by pressing "GET SHAREABLE LINK" in the publish options).
Be sure to reach us in case of any questions!