テキストの行が同じ場所で始まらない

Question

私はちょっとしたクイズをしましたが、最初の3つの答えが乱雑に見えてから の青いテキストを送信してください。彼らは同じ の位置から開始しません。私はマージンで動作させようとしましたが、成功はしませんでした。

https://plnkr.co/edit/OvcwBzfFte4A0F0NbNSi?p=preview

<style> 
    .quizbox { 
    width: 58%; 
    max-width: 950px; 
    border: 1px gray solid; 
    margin: auto; 
    padding: 10px; 
    border-radius: 10px; 
    margin-top: 7%; 
    text-align: center; 
    position: relative; 
    } 



    .row { 
    text-align: left; 
    margin-left: 10%; 
    } 

    span#demo, #demo2, #demo3 { 
    display: inline; 
    color: blue; 
    margin-left: 10%; 
    } 
</style> 


<div class="quizbox"> 

    <!-- open main div --> 
    <h1>Quiz</h1> 
    <form id="form1" action=" "> 
     <div class="row"> <h3>Moths are a member of what order?</h3></div> 
     <div class="row"> 
     <input name="variable" type="radio" value="0" />Octagon <span id="demo"></span></div> 
     <div> </div> 
     <div class="row"> 
     <input name="variable" type="radio" value="0" />Leprosy <span id="demo2"></span></div> 
     <div class="row"> 
     <input name="variable" type="radio" value="33" />Lepidoptera <span id="demo3"></span></div> 
     &nbsp; 
    <div class="row"> <h3>Question 2</h3></div> 
     <div class="row"> 
     <input name="sub" type="radio" value="33" />Answer 1 </div> 
     <div class="row"> 
     <input name="sub" type="radio" value="0" />Answer 2</div> 
     <div class="row"> 
     <input name="sub" type="radio" value="0" />Answer 3</div> 
     &nbsp; 
     <div class="row"><h3>Question 3</h3></div> 
     <div class="row"> 
     <input name="con" type="radio" value="0" />Answer 1</div> 
     <div class="row"> 
     <input name="con" type="radio" value="33" />Answer 2</div> 
     <div class="row"> 
     <input name="con" type="radio" value="0" />Answer 3</div> 
    <p> <input type="submit" onclick="myFunction()" value="Submit" /> </p> 
    </form>Your grade is: <span id="grade">__</span> 
    <p id="grade2"></p> 

</div> 
<!-- close quizbox div --> 


<span>fdf</span> <span>fdf</span><span>fdf</span> 
fd 
<script> 
    document.getElementById("form1").onsubmit = function(e) { 
     e.preventDefault(); 
     variable = parseInt(document.querySelector('input[name = "variable"]:checked').value); 
     sub = parseInt(document.querySelector('input[name = "sub"]:checked').value); 
     con = parseInt(document.querySelector('input[name = "con"]:checked').value); 

     result = variable + sub + con; 

     document.getElementById("grade").innerHTML = result; 
     var result2 = ""; 
     if (result == 0) { 
     result2 = "I don't think you studied." 
     }; 
     if (result == 33) { 
     result2 = "You need to spend more time. Try again." 
     }; 
     if (result == 66) { 
     result2 = "I think you could do better. Try again." 
     }; 
     if (result == 99) { 
     result2 = "Excellent!" 
     }; 
     document.getElementById("grade2").innerHTML = result2; 

     return false; // required to not refresh the page; just leave this here 
    } //this ends the submit function 
    function myFunction() { 
    document.getElementById("demo").innerHTML = "An octagon is an object with 8 sides to it"; 
    document.getElementById("demo2").innerHTML = "Leprosy is a chronic infection"; 
    document.getElementById("demo3").innerHTML = "Yes ! this is correct"; 

    } 
</script> 

hgf 
<div> </div> 

Answer 1

幅の50％を作成し、それを右にフロートます

span#demo, #demo2, #demo3 { 
    display: inline; 
    color: blue; 
    margin-left: 10%; 
    float:right; 
    width:50%; 
    }