App extension code is conflicting with theme code

[toju]

I am developing a theme extension and facing a strange issue. The app extension is working perfectly fine with theme 2.0 but in theme 1.0 it is conflicting with the theme code as you can see in the screenshot.

Here is my extension code 

{% if request.design_mode %}
<div class="sg-widget" style="visibility: visible; display: block;">
  <div class="main-element {{ block.settings.alignment }}">
    <div class="shoppinggives-tag contained pdp-box" style="border: 2px solid {{ block.settings.color }};">
      <div id="sg-main-text-without-btn">
        This is a testing code.
      </div>
    </div>
  </div>
</div>
{% endif %}

<script>
  cartBlockSettings("{{ block.settings.alignment }}", "{{ block.settings.color }}");
</script>


{% comment %}<span style="color: {{ block.settings.color }}">{% endcomment %}
{% comment %}App blocks let you build powerful integrations with online store themes!{% endcomment %}
{% comment %}</span>{% endcomment %}
{% comment %}{{ "shopify-app-logo.png" | asset_url | img_tag }}{% endcomment %}
{% comment %}{% render "app_snippet" %}{% endcomment %}
{% schema %}
{
  "name": "example Widget",
  "target": "section",
  "stylesheet": "example-style.css",
  "javascript": "example-cart-widget.js",
  "settings": [
    {
      "label": "Color",
      "id": "color",
      "type": "color",
      "default": "#000000"
    },
    {
    "type": "select",
    "id": "alignment",
    "label": "Alignment",
    "options": [
      {
        "value": "left",
        "label": "Left"
      },
      {
        "value": "center",
        "label": "Center"
      },
      {
        "value": "right",
        "label": "Right"
      }
    ],
    "default": "left"
  }
  ]
}
{% endschema %}

What could be the possible causes and what is the solution to this problem?