Ajax response conflicting css

I am displaying two functions in Modal head and Modal body using ajax. Before sending ajax request the modal looks like this

After ajax response the modal looks like this

Where is the issue?

Cart.php

include('includes/Cart_code.php');

    <?php

    if (isset($_POST['ID'])) {
        $cart_class = new cart_class($_POST['ID']);
        $cart_class->cart_head_info_print();
        $cart_class->cart_body_info_print();
        exit();
       }
    ?>

<script type="text/javascript">

    $(document).ready(function(){
            $.ajax({
                type: "POST",
                url: "Cart.php",
                data: {"ID":id},
                success: function(result){
                    $('#ajaxResult').html(result);

                }
            });
        });
</script>

      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
          <img src="" class="showPic">
            <div id="ajaxResult">
            <div class="modal-header" style="padding:35px 50px;">

              <button type="button" class="close" data-dismiss="modal">&times;</button>  
              <!---HERE HEADER DATA WILL BE DISPLAY---->

            </div>
            <div class="modal-body" style="padding:40px 50px;">
                <!---HERE BODY DATA WILL BE DISPLAY---->
            </div>
           </div>
        </div>
      </div> 
    </div>