Выравнивание кнопок, текста и разделов в массе

Question

Я хочу выровнять все в большой части кода справа. Таким образом, он выглядит лучше и не отвлекает от других частей. Таким образом, это одна правая сторона и по-прежнему доступна для всего остального кода. Только в gui он выровнен справа. Это код, который я хочу поставить справа от экрана. Извините, если я noob за то, что не знаю этого и знаю, как сделать правильный код в переполнении стека.

<p>================================</p> 
<button style="background-color:Purple; color:red; border:red; font-size:15px;" type="button" 
onclick="buyMom()">Buy 1 mom</button> 
<p>Moms:+1 animals per second</p> 
<div id="momCount">0</div> 
<div id="momPrice">50</div><br> 
<p>================================</p> 
<button style="background-color:red; color:purple; border:red; font-size:15px;" type="button" 
onclick="buyFarm()">Buy 1 farm</button> 
<p>Farms:+50 animals per second</p> 
<div id="farmCount">0</div> 
<div id="farmPrice">500</div><br> 
<p>================================</p> 
<button style="background-color:yellow; color:blue; border:red; font-size:15px;" type="button" 
onclick="buyFactory()">Buy 1 factory</button> 
<p>Factorys:+100 animals per second</p> 
<div id="factoryCount">0</div> 
<div id="factoryPrice">1000</div><br> 
<p>================================</p>  
<button style="background-color:orange; color:red; border:red; font-size:15px;" type="button" 
onclick="buyClone()">Buy 1 cloner</button> 
<p>Cloners:+200 animals per second</p> 
<div id="cloneCount">0</div> 
<div id="clonePrice">2000</div><br> 
<p>================================</p> 

Answer 1

Просто дайте ему CSS text-align:right; и обернуть HTML часть в селекторе вы можете предназначаться с помощью CSS.

HTML

<div class="container"> 
<p>================================</p> 
<button style="background-color:Purple; color:red; border:red; font-size:15px;" type="button" 
onclick="buyMom()">Buy 1 mom</button> 
<p>Moms:+1 animals per second</p> 
<div id="momCount">0</div> 
<div id="momPrice">50</div><br> 
<p>================================</p> 
<button style="background-color:red; color:purple; border:red; font-size:15px;" type="button" 
onclick="buyFarm()">Buy 1 farm</button> 
<p>Farms:+50 animals per second</p> 
<div id="farmCount">0</div> 
<div id="farmPrice">500</div><br> 
<p>================================</p> 
<button style="background-color:yellow; color:blue; border:red; font-size:15px;" type="button" 
onclick="buyFactory()">Buy 1 factory</button> 
<p>Factorys:+100 animals per second</p> 
<div id="factoryCount">0</div> 
<div id="factoryPrice">1000</div><br> 
<p>================================</p>  
<button style="background-color:orange; color:red; border:red; font-size:15px;" type="button" 
onclick="buyClone()">Buy 1 cloner</button> 
<p>Cloners:+200 animals per second</p> 
<div id="cloneCount">0</div> 
<div id="clonePrice">2000</div><br> 
<p>================================</p> 
</div> 

CSS

.container { 
    text-align: right; 
} 

example FIDDLE