For more information, check out: http://jsfiddle.net/3tL9msap/2
The grid's right margin is being affected by the button's width, pushing it inwards.
To see the difference, view the layout without the button at this link: http://jsfiddle.net/3tL9msap/3, where the margins are equal on both sides, as expected.
This issue with the button occurs even when the <h1> and <button> elements are placed within their own container <div class="ui container"> at the top of the structure.
If this behavior is intentional, how can I align the button to the right without impacting the grid margins?
Here is the HTML code snippet:
<div class="ui container">
<button class="ui right floated primary button"><i class="plus icon"></i> New entry</button>
<h1>Why does the button cause alignment issues?</h1>
<div class="ui grid">
<div class="stretched row">
<div class="twelve wide column">
<div class="ui segment">Left column</div>
</div>
<div class="four wide column">
<div class="ui segment">
<h3>Elliot Fu</h3>
<p>Friends of Veronika</p>
<div class="ui two buttons">
<div class="ui basic green button">Approve</div>
<div class="ui basic red button">Decline</div>
</div>
</div>
</div>
</div>
</div>
</div>