summerMeals issue

    <div class="container">
      <div class="jumbotron">
        <h1 class="display-4 text-center">Summertime Meals</h1>
        <p class="lead text-center">Search for food sides near you!</p>
        <hr class="my-4">
        <form>
          <div class="form-row">
            <div class="col-4">
              <input type="text" class="form-control" placeholder="Address">
            </div>
            <div class="col-2">
              <input type="text" class="form-control" placeholder="City">
            </div>
            <div class="col-1">
              <input type="text" class="form-control" placeholder="State">
            </div>
            <div class="col-1">
              <input type="text" class="form-control" placeholder="Zip">
            </div>
            <div class="col-1">
              <button type="Submit" class="btn btn-primary btn-sm">Find Sites</button>
            </div>
          </div>
        </form>
        <hr class="my-4">
      </div>
      <div class="container mainbod">
      <h1>Food Sites</h1>
      <div class='sidebar pad2'>
        <p *ngFor="let ting of listingTest">Name: {{ ting.name }} <br> {{ ting.desc }}</p>
      </div>
      <div id='map' class='map pad2'>Map</div>
      <script>
        mapboxgl.accessToken = "pk.eyJ1IjoidmljYWdiYXNpIiwiYSI6ImNqY2lpcWE2aTNteGEycWxslcDl2NzhpZWQifQ.KJIJ5fZsHtxebZwwROAc5w";
        var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/vicagbasi/cjcjqksly12rl62rloz0ps1xmm'

        });

        // Add zoom and rotation controls to the map.
        map.addControl(new mapboxgl.NavigationControl());
      </script>
      </div>

<!--
      <div class="container" id="body-contain">
        <div id='map' style='width: 70%; height: 300px;'></div>

      </div> -->


  <!-- </body>
</html> -->
<router-outlet></router-outlet>