title: Set width for `PivotItem` in Office UI Fabric
body: <p>I am using <code>Pivot</code> and <code>PivotItem</code> from Office UI Fabric to display my content in tabs. Currently when the tab renders, all the tabs are left aligned.</p>
  
  <p><a href="https://i.stack.imgur.com/vRyRb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vRyRb.png" alt="enter image description here"></a></p>
  
  <p>I need to display the tabs with equal width so that they occupy the 100% width of the page.</p>
  
  <p>Below is the code for <code>Pivot</code>. </p>
  
  <pre><code>   &lt;Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} styles={pivotStyles}&gt;
        &lt;PivotItem headerText="Foo"&gt;
          &lt;Label&gt;Pivot #1&lt;/Label&gt;
        &lt;/PivotItem&gt;
        &lt;PivotItem headerText="Bar"&gt;
          &lt;Label&gt;Pivot #2&lt;/Label&gt;
        &lt;/PivotItem&gt;
        &lt;PivotItem headerText="Bas"&gt;
          &lt;Label&gt;Pivot #3&lt;/Label&gt;
        &lt;/PivotItem&gt;
        &lt;PivotItem headerText="Biz"&gt;
          &lt;Label&gt;Pivot #4&lt;/Label&gt;
        &lt;/PivotItem&gt;
      &lt;/Pivot&gt;
  </code></pre>
  
  <p>Below is the code that I could figure out to add <code>styles</code> to <code>Pivot</code>. But we do not have <code>styles</code> attribute for <code>PivotItem</code>.</p>
  
  <pre><code>const pivotStyles:IPivotStyles = {
    link: {},
    linkContent: {},
    linkIsSelected: {},
    text: {},
    icon: {},
    count: {},
    root: {
      //background: DefaultPalette.greenDark
    }
  };
  </code></pre>
  
  <p>How can I apply style to <code>PivotItem</code> so that I can add width to it?</p>