I'm using the following modal example in Lightning Design System, however, inside Salesforce Lightning Experience, this does not display correctly. The top portion of the modal form does not show correctly and I was wondering how to adjust the positioning of this modal. This seems like a defect in the Lightning Design System and was wondering how to go around it. Thanks!



https://www.lightningdesignsystem.com/components/progress-indicator/

<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal--large" aria-labelledby="header43">
  <div class="slds-modal__container">
    <div class="slds-modal__header">
      <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
  
        <span class="slds-assistive-text">Close</span>
      </button>
      <h2 id="header43" class="slds-text-heading--medium">Modal Header</h2>
    </div>
    <div class="slds-modal__content slds-grow slds-p-around--medium"></div>
    <div class="slds-modal__footer slds-grid slds-grid--align-spread">
      <div class="slds-progress slds-progress--shade slds-order--2">
        <ol class="slds-progress__list">
          <li class="slds-progress__item slds-is-completed">
            <button class="slds-button slds-button--icon slds-progress__marker slds-progress__marker--icon" aria-describedby="step-1-tooltip" title="settings">

              <span class="slds-assistive-text">Step 1 - Completed</span>
            </button>
          </li>
          <li class="slds-progress__item slds-is-active">
            <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
              <span class="slds-assistive-text">Step 2 - Active</span>
            </button>
          </li>
          <li class="slds-progress__item">
            <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
              <span class="slds-assistive-text">Step 3 </span>
            </button>
          </li>
          <li class="slds-progress__item">
            <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
              <span class="slds-assistive-text">Step 4 </span>
            </button>
          </li>
          <li class="slds-progress__item">
            <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
              <span class="slds-assistive-text">Step 5 </span>
            </button>
          </li>
        </ol>
        <div class="slds-progress-bar">
          <span class="slds-progress-bar__value" style="width:25%;">
            <span class="slds-assistive-text">Progress: 25%</span>
          </span>
        </div>
      </div>
      <button class="slds-button slds-button--neutral slds-order--1">Cancel</button>
      <button class="slds-button slds-button--brand slds-order--3">Save</button>
    </div>
  </div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>

This is the correct display and I should see the header of the modal like below



Inside Salesforce Lightning Experience - this is what I see and this is not correct as the header of the modal is not displayed at all
​