Empty columns in responsive grid?
<p>I'm trying to learn the responsive grid and am having difficulty grasping how to place items within the "columns." I'm working with 12 of them, something that looks like the one here: <a href="http://www.w3schools.com/css/css_rwd_mediaqueries.asp" rel="noreferrer">http://www.w3schools.com/css/css_rwd_mediaqueries.asp</a></p>

<p>For example, I'd like to have one row with the name of the website on the left and the navigation bar on the right side:</p>

<pre><code>&lt;div class="row"&gt;   
   &lt;div class="col-1"&gt;empty column acting as margin; do i need a div for this?&lt;/div&gt;
   &lt;div class="col-2" id="name"&gt;
       website name
   &lt;/div&gt;
   &lt;div class="col-4"&gt;another set of empty columns&lt;/div&gt;
   &lt;div class="col-4" id="navbar"&gt;
      &lt;a href="home.html"&gt;Home&lt;/a&gt;
      &lt;a href="about.html"&gt;About&lt;/a&gt;
      &lt;a href="page3.html"&gt;Page 3&lt;/a&gt;
   &lt;/div&gt;
   &lt;div class="col-1"&gt;empty column as margin&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>How would I be able to achieve this? The divs with "empty columns" in them are clearly wrong, but I'm not sure how to get the proper widths. The link above says that the number of columns in each row should add up to 12; does this mean I need to specify empty columns, too?</p>