Q:

Responsive menu toggle button align

This is my menu toggle section:
JS FIDDLE
jsfiddle link or external html
Menu look like this

Question:
What change to make toggle button (menu icon) to align in <div class="navigation"></div> container ?  CSS ONLY

For better imagination here are align text ( left, right, center )
  
HTML:
<div class="navigation">
    <div id="slidebox">

                <div id="toggle">
                    <a href="#">&#9776;</a>
                    <a class="top" href="#slidebox">&#9776;</a>
                </div>

                <ul id="box" class="menu">
                    <li><a href="#">Homepage</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>

            </div>
</div>

CSS:
/* TOGGLE */

#slidebox {
    position: relative;
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
}

#toggle {
    height: 50px;
    padding: 0;
    position: relative;
    background: #0292a8;
    display: none;
    text-align: center;
}

@media screen and (max-width: 640px) { 
    #toggle {
        display: block;
    }
}

#toggle a { 
    position: absolute;
    text-decoration: none;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
}

#box {
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    display: block;
}

@media screen and (max-width: 640px) { 
    #box {
        display: none;
    }
}

#slidebox:target #box {
    min-height: 100%;
    display: block;
    opacity: 1;
}

#slidebox:target .top { 
    pointer-events: none;
    display: none;
}

A:

I did not get your question properly.  But it you want it to float left or right.  Based on the image you provided, it will be like : 
#toggle {
margin-left: auto;
margin-right: 0;
width: 50%;
}

Give some width,which you like.