title: How can I resolve bootstrap CSS issue?
body: <p>This is the actual output
  <img src="https://i.stack.imgur.com/3uZDN.png" alt="enter image description here"></p>
  
  <p>How to remove the highlighted section in red, in the actual output?</p>
  
  <p>This is my expected output</p>
  
  <p><img src="https://i.stack.imgur.com/ExLQS.png" alt="enter image description here"></p>
  
  <p><a href="http://jsfiddle.net/t8xdzy1z/" rel="nofollow noreferrer">JSFiddle Demo link</a></p>
  
  <p>Example,</p>
  
  <p></p>
  
  <pre><code>.wizard ul
  {
      list-style: none outside none;
      padding: 0;
      margin: 0;
      width: 4000px;
  }
  
  
      .wizard ul li
      {
          float: left;
          margin: 0;
          padding: 0 20px 0 30px;
          line-height: 35px;
          position: relative;
          background: #f5f5f5;
          color: #d0d0d0;
          font-size: 12px;
          cursor: default;
          -webkit-transition: all .218s ease;
          -moz-transition: all .218s ease;
          -o-transition: all .218s ease;
          transition: all .218s ease;
      }
  
          .wizard ul li .chevron
          {
              border: 24px solid transparent;
              border-left: 14px solid #d4d4d4;
              border-right: 0;
               border-width: 18px 0 17px 14px;
              display: block;
              position: absolute;
              right: -14px;
              top: 0;
              z-index: 1;
          }
  
              .wizard ul li .chevron:before
              {
                  border: 24px solid transparent;
                  border-left: 14px solid #f5f5f5;
                  border-right: 0;
                  content: "";
                  display: block;
                  position: absolute;
                  right: 1px;
                  top: -24px;
                  -webkit-transition: all .218s ease;
                  -moz-transition: all .218s ease;
                  -o-transition: all .218s ease;
                  transition: all .218s ease;
              }
  
          .wizard ul li.complete
          {
              background: #f5f5f5;
              color: #444;
          }
  
              .wizard ul li.complete:before
              {
                  display: block;
                  content: "";
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  right: -1px;
                  height: 2px;
                  max-height: 2px;
                  overflow: hidden;
  
                  z-index: 10000;
              }
  
              .wizard ul li.complete:hover
              {
                  background: #eee;
                  cursor: pointer;
              }
  
                  .wizard ul li.complete:hover .chevron:before
                  {
                      border-left: 20px solid #eee;
                  }
  
              .wizard ul li.complete .chevron:before
              {
                  border-left: 20px solid #f5f5f5;
              } 
  
          .wizard ul li.active
          {
              background: #428bca;
              color: #262626;
          }
  
              .wizard ul li.active:before
              {
                  display: block;
                  content: "";
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  right: -1px;
                  height: 2px;
                  max-height: 2px;
                  overflow: hidden;                     
                  z-index: 10000;
              }
  
              .wizard ul li.active .chevron:before
              {
                  border-left: 14px solid #428bca;
              }
  
          .wizard ul li .badge
          {
              margin-right: 8px;
          }
  
          .wizard ul li:first-child
          {
              -webkit-border-radius: 2px 0 0 0;
              -webkit-background-clip: padding-box;
              -moz-border-radius: 2px 0 0 0;
              -moz-background-clip: padding;
              border-radius: 2px 0 0 0;
              background-clip: padding-box;
              padding-left: 20px;
          }
      /**/
  &lt;/style&gt;
  
  
      &lt;div data-target="#simplewizardinwidget-steps" class="wizard" id="simplewizardinwidget"&gt;
          &lt;ul class="steps"&gt;
              &lt;li class="complete" data-target="#simplewizardinwidgetstep1"&gt;Personal Information&lt;span class="chevron"&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;li data-target="#simplewizardinwidgetstep2" class="complete"&gt;Qualification&lt;span class="chevron"&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;li data-target="#simplewizardinwidgetstep3" class="active"&gt;Profile&lt;span class="chevron"&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;li data-target="#simplewizardinwidgetstep2" class="complete"&gt;Qualification1&lt;span class="chevron"&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;li data-target="#simplewizardinwidgetstep2" class="complete"&gt;Qualification2&lt;span class="chevron"&gt;&lt;/span&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>kindly assist me to achieve this..</p>
  
  <p>Html Part</p>