title: How can I align my search button to the right?
body: <p>I'm not well versed in front end web design or CSS. Using a pre-made template from Foundation, however my code for a search button is not aligning like the example button.</p>
  
  <p>Using this template: <a href="http://foundation.zurb.com/templates/workspace.html" rel="nofollow noreferrer">http://foundation.zurb.com/templates/workspace.html</a></p>
  
  <p>Can someone tell me how I can move the search button to the right as in pic where the blue button is located?</p>
  
  <p><img src="https://i.stack.imgur.com/pxgli.png" alt="enter image description here"></p>
  
  <p>This is what I am using now:</p>
  
  <p><code>&lt;input type="submit" value="Search" style="float: right;"&gt;</code></p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/W2Yst/4/" rel="nofollow noreferrer">Search button code</a></p>
  
  <pre><code>&lt;ul class="right"&gt;
  &lt;li class="search"&gt;
      &lt;li class="has-button"&gt;
          /* Original template form */
          {#&lt;form&gt;#}
              {#&lt;input type="search"&gt;#}
          {#&lt;/form&gt;#}
  
          /* My form with code */
          &lt;form action="{{ path('sym_corp_search') }}" method="GET"&gt;
              &lt;label&gt;&lt;input type="search" name="q" value={{ app.request.query.get('q') }}&gt;&lt;/label&gt;
              &lt;input type="submit" value="Search" style="float: right;"&gt;
          &lt;/form&gt;
      &lt;/li&gt;
  &lt;/li&gt;
  
  /* Original form button in blue */
  &lt;li class="has-button"&gt;
      &lt;a class="small button" href="#"&gt;Search&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>