Adding Chatter feed mess up current visualforce page style

Question

I need to add Chatter feed into my visualforce page.Here the before adding chatterfeed tag.

But after adding chatter:feedwithfollowers tag, my page style mess up.The section area size size become smaller.

While looking for solution I bumped into this Use standard stylesheet with custom for Chatter VF page, but I cannot apply iframe due to business requirement.

Here my code snippet:

<apex:page standardController="MyCustomObject__c" 
  extensions="My_Ext"
  docType="html-5.0" applyHtmlTag="false" cache="false" showHeader="false" sidebar="false" standardStylesheets="false">

      <!-- [START] Container-->
      <div  class="container" id="one-app">


          <!--[START] one-carousel-->
          <div id="one-carousel" >
            <!--[START] Discussion   section-->
            <div>
             <div class="panel panel-default panel-without-side">
                  <div class="panel-heading clickable" data-toggle="collapse" data-target="#discussionPanel">
                      <span class="heading-cls">
                        <h3 class="panel-title"><strong>Discussion</strong></h3>
                      </span>
                  </div>
                  <div class="panel-body panel-collapse collapse in" id="discussionPanel" >

                    <chatter:feedwithfollowers entityid="{!MyCustomObject__c.Id}" showheader="false"/>
                    </div>
              </div>
            </div>
            <!--[END] Discussion section-->
            <apex:form>
            <!--[START] Other Section list  section-->
            <div>
            <div class="panel panel-default panel-without-side">
                  <div class="panel-heading clickable" data-toggle="collapse" data-target="#otherDiscussionPanel">
                      <span class="heading-cls">
                        <h3 class="panel-title"><strong>Other Section</strong></h3>
                      </span>
                  </div>
                  <div class="panel-body panel-collapse collapse in" id="othersection" >


                      <div class="row">
                        <apex:outputPanel id="Otherpanel" >
                          <div class="col-md-6">
                            <div class="page-header">
                              <h4><strong>{!MyCustomObject.Customer_Name__c}</strong></h4>
                            </div>
                          </div>


                        </apex:outputPanel>
                      </div>

                  </div>
              </div>
            </div>
            <!--[END] Other list section-->

            </apex:form>  
          </div>
          <!--[END] one-carousel-->
      </div>
      <!-- [END] Container --- Actual Page Content-->
</apex:page>

How I can solve this conflict?

Note:I am using Bootstrap.