title: Responsive padding on navigation links
body: <p>I have a navigation bar which consists of two parts. The left area, which is where the actual links are. And the right area, which is were a search box will display.</p>
  
  <p>The left area is fluid, while the right area has a fixed width.</p>
  
  <p>What I'm trying to figure out is how to set the padding on my navigation links so that it will use up the full fluid width of the left area. (The navigation links are buttons with a hover effect, I would like them to cover the full navigation bar regardless of it's width)</p>
  
  <p>See the example below</p>
  
  <p><strong>What I'm trying to do (fluid/percentage based padding based on bar width)</strong></p>
  
  <pre><code>  width 300px
  |========================================|========|
  |---Link------Link------Link------Link---| Search |
  |========================================|========|
  
    width 400px
    - padding on Links automatically adjusts to fill the bar
  |================================================|========|
  |----Link--------Link--------Link--------Link----| Search |
  |================================================|========|
  </code></pre>
  
  <p>How would I go about achieving this? I've tried messing with padding percentages but I can't seem to get it to work as desired. Are padding percentages even the best way to go about this?</p>