title: React Semantic UI - Step Component not displaying properly on Card
body: <p>I am using semantic UI for React visual components.
  There are issues with displaying the Step components contained within the Card Designed. Although, I have set the Card component to be fluid in the code shown below.          </p>
  
  <pre><code>&lt;Card fluid raised&gt;
  </code></pre>
  
  <p>When viewed through a desktop, it overflows to the outside of the Card like shown below:<a href="https://i.stack.imgur.com/SJdsv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SJdsv.png" alt="enter image description here"></a></p>
  
  <p>However, it works just fine when viewed through a mobile. It stacks up vertically well within the Card component like shown below:
  <a href="https://i.stack.imgur.com/jA3bD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jA3bD.png" alt="enter image description here"></a></p>
  
  <p>My Code is as Given Below.</p>
  
  <pre><code>// Confirmation.jsx
  import React, { Component } from 'react';
  import { Label, Header, Card, Form, Button, Container, Icon, Step } from 'semantic-ui-react';
  
  
  
  
  class Confirmation extends Component{
      saveAndContinue = (e) =&gt; {
          e.preventDefault();
          this.props.nextStep();
      }
  
      back  = (e) =&gt; {
          e.preventDefault();
          this.props.prevStep();
      }
  
      render(){
          const {values: {  companyName, phoneno, email, subscription, shopregno, gstin, ownername, owneremail, ownerphone, customerservice, address, position  }} = this.props;
  
          return(
  
  
              &lt;Container&gt;
                &lt;Header as='h2' icon textalign='center'&gt;
                                &lt;Icon name='users' circular /&gt;
                                &lt;Header.Content&gt;REGISTRATION&lt;/Header.Content&gt;
                  &lt;/Header&gt;
              &lt;Card.Group&gt;
               &lt;Card fluid raised&gt;
                 &lt;Card.Content&gt;
                    &lt;Card.Header&gt;
                    &lt;Step.Group&gt;
                      &lt;Step completed&gt;
                        &lt;Icon name='user' /&gt;
                        &lt;Step.Content&gt;
                          &lt;Step.Title&gt;Customer Details&lt;/Step.Title&gt;
                          &lt;Step.Description&gt;Enter the customer details&lt;/Step.Description&gt;
                        &lt;/Step.Content&gt;
                      &lt;/Step&gt;
  
                        &lt;Step completed&gt;
                        &lt;Icon name='map marker alternate' /&gt;
                        &lt;Step.Content&gt;
                          &lt;Step.Title&gt;Map Details&lt;/Step.Title&gt;
                          &lt;Step.Description&gt;Enter Location information&lt;/Step.Description&gt;
                        &lt;/Step.Content&gt;
                      &lt;/Step&gt;
  
  
                      &lt;Step completed&gt;
                        &lt;Icon name='book' /&gt;
                        &lt;Step.Content&gt;
                          &lt;Step.Title&gt;Category Details&lt;/Step.Title&gt;
                          &lt;Step.Description&gt;Enter Category information&lt;/Step.Description&gt;
                        &lt;/Step.Content&gt;
                      &lt;/Step&gt;
  
                      &lt;Step completed&gt;
                        &lt;Icon name='servicestack' /&gt;
                        &lt;Step.Content&gt;
                          &lt;Step.Title&gt;Service Details&lt;/Step.Title&gt;
                          &lt;Step.Description&gt;Enter Service information&lt;/Step.Description&gt;
                        &lt;/Step.Content&gt;
                      &lt;/Step&gt;
  
                      &lt;Step completed&gt;
                        &lt;Icon name='address card' /&gt;
                        &lt;Step.Content&gt;
                          &lt;Step.Title&gt;Owner Details&lt;/Step.Title&gt;
                         &lt;Step.Description&gt;Enter Owner information&lt;/Step.Description&gt;
  
                        &lt;/Step.Content&gt;
                      &lt;/Step&gt;
  
                     &lt;Step active&gt;
                         &lt;Icon name='info' /&gt;
                        &lt;Step.Content&gt;
                          &lt;Step.Title&gt;Confirm Registration&lt;/Step.Title&gt;
                          &lt;Step.Description&gt;Finalize &amp; Confirm&lt;/Step.Description&gt;
  
                        &lt;/Step.Content&gt;
                      &lt;/Step&gt;
  
                    &lt;/Step.Group&gt;
  
                    &lt;/Card.Header&gt;
                 &lt;/Card.Content&gt;
  
  
  
  
  
               &lt;Card.Content extra&gt;
  
                  &lt;Button secondary onClick={this.back}&gt;Back&lt;/Button&gt;
                  &lt;Button primary onClick={this.saveAndContinue}&gt;Save And Continue &lt;/Button&gt;
               &lt;/Card.Content&gt;
  
  
  
           &lt;/Card&gt;
         &lt;/Card.Group&gt;
  
  
  
  
  
      &lt;/Container&gt;
  
  
  
          )
      }
  }
  
  export default Confirmation;
  </code></pre>
  
  <p>I tried a method suggested by Jake, which adds on a scrollbar to the Step.Group as shown Below:
  <a href="https://i.stack.imgur.com/sVonv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sVonv.png" alt="enter image description here"></a></p>
  
  <p>Not really an ideal solution, since the scrollbar doesn't auto-move to the active step.</p>
  
  <p>Any Help will be highly appreciated, to solve this bug.
  From the documentation of semantic UI, I understand there is a  width preset for the Card Component. How does one modify this preset width by overriding it?</p>