NOTES: I am going to assume the following:
1. that the syntax errors in your CSS were introduced by either the cut-and-pasting or by the Paste-bin site.
eg. your CSS properties not having colons, your url() functions not having quotes, your focus selectors missing a colon, etc...
2. that the strange web-browser specific -webkit-slider, -moz-range, etc.. are real, although I couldn't find them on Google.
3. that you know you will need to remove the "file:///C:/Users/DrWhite/Desktop/DiscordiaGame/" part of your image URLs sometime before releasing a version of your story.
There are a couple of issues with your HTML and CSS:
1. The center value of your float CSS properties is invalid, you would generally use text-align: center to horizontal align text.
2. By default your floating left & right images are going to effect any text that appears on any line the image covers. This is why the "Ligne 1" is being pushed to the right, because it is being effected by the left image which is has enough height to overlap the line that text is on.
There are a number of ways you can correct this from: changing the display property of the div element containing second section of text from block to inline-block; to making the overall layout of both the top & bottom sections of text into a three panel layout.
Which you do depends on the overall layout you're looking for, which you haven't stated.