grid system not working | bootstrap
<p>recently i am building a website using bootstrap &amp; restful js. And i expect the website show like this
<a href="https://i.stack.imgur.com/iWIaD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iWIaD.png" alt="enter image description here"></a></p>

<p>but now i shown like this:
<a href="https://i.stack.imgur.com/EOB3E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EOB3E.png" alt="enter image description here"></a></p>

<p>the content should be shown both left and right, but my version only shows on the left</p>

<p>menu.html</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main class="row"&gt;
    &lt;div class="col-md-12"&gt;
  &lt;h1 class="text-uppercase text-center"&gt;Our Menu&lt;/h1&gt;
 &lt;/div&gt;

 &lt;div class="row" id="appetizers"&gt;
  &lt;h1 class="text-uppercase text-center " style="font-size:4rem, text-color:#FF0000"&gt;Appetizers&lt;/h1&gt;
 &lt;/div&gt;
&lt;/main&gt;</code></pre>
</div>
</div>
</p>

<p>and my menuHelper.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var HTMLAppetizerStart = '&lt;div class = "appetizer-entry row"&gt;&lt;/div&gt;'
var HTMLAppetizerFoodName = '&lt;h3 class="col-md-2"&gt;——&lt;/h3&gt;&lt;h3 class="col-md-10 text-uppercase" style="letter-spacing:0.1em"&gt;%data%&lt;/h3&gt;'
var HTMLAppetizerFoodPrice ='&lt;p class="col-md-2" style="font-weight:700;letter-spacing:0.14em"&gt;%data%&lt;/p&gt;'                              

var HTMLAppetizerFoodMaterial ='&lt;p class="col-md-10"&gt;%data%&lt;/p&gt;'              
                            </code></pre>
</div>
</div>
</p>

<p>the appetizer-entry class i set the width is 50%</p>

<p>any suggestions?</p>