title: How to 'center' <div > for mobile
body: <p>So it works for desktop, even I'm sure I'm doing it the wrong way, but it aligns itself to left on mobile.</p>
  
  <p>I tried to adding some code to @media but couldn't figure out.</p>
  
  <p>I was messing mainly with right: float: padding:</p>
  
  <p>any align commands don't work</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media not all and (min-width: 780px) {
    #centeredmenu { max-width: 220px; }
  }
  
  
  
  #centeredmenu {
     clear:both;
     min-width: 220px;
  }
  
  
  #centeredmenu ul {
     margin:0;
     padding:0;
     list-style:none;
     float:right;
     position:relative;
     right:50%;
   
  }
  #centeredmenu ul li {
     margin:1px 0 0 1px;
     padding:0;
     float: left;
     position: relative;
     left:50%;
     top:11px;
  
  }
  #centeredmenu ul li a {
      z-index: 999;
     display:block;
     margin:0;
     padding:.4em .2em .4em;
     line-height:1em;
     background:#ddd;
     text-decoration:none;
     color:#444;
      width: 70px;
     font-size: 13px;
      font-weight: 100;
    text-align: center;
     font-family: Proxima Nova;
  }
  #centeredmenu ul li.active a {
     color:#fff;
     background:#D2383C;
  
    
  }
  #centeredmenu ul li a:hover {
     background:#36f; /* Top menu items background colour */
     color:#fff;
  }
  #centeredmenu ul li:hover a,
  #centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
     background:#777777; /* Top menu items background colour */
     color:#fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="centeredmenu"&gt;
  &lt;ul&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;2014&lt;/a&gt;&lt;/li&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;2013&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;2012&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;2011&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;2010&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;2009&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;2008&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;2007&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;2006&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#"&gt;2005&lt;/a&gt;&lt;/li&gt;
    
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>