0
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
  
        <div class="row">
            <div class="col-12">
              <div class="text-center">
              <h1>Our Menu</h1>
  </div> </div>
    </div>
       
        </div>


        <div class="row">
              <div class="col-12 col-lg-6">
                  <h2>Falafel</h2>
                  <p>Chickpea, herbs, spices.</p>
                  <h2>Fried Calamari</h2>
                  <p>Squid, buttermilk.</p>
              </div>
              <div class="col-12 col-lg-6">
                    <h2>Pasta Salad</h2>
                    <p>Lettuce, vegetables, mozzarella.</p>
                    <h2>Greek Salad</h2>
                    <p>Cucumbers, onion, feta cheese.</p>
                </div>
          
          </div>  </div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
 
 
</body

On second row, it should consist of 2 columns and the classes "col-12" and "col-lg-6" means when the screen in xs and bigger till lg each column should take the 12 columns (according to bootstrap grid system) and when screen is considered lg (large screens) each column should takes half of the 12 columns layout. But it didn't work and the second column has different margin (to the left). What is wrong with this?

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Marwah
  • 1
  • The code is working fine. Check here: https://jsbin.com/ximufetava/2/edit?html,css,output The margin to the left is not correct because the second row needs to be inside container div. You can format your html and try this. – manojadams Mar 06 '23 at 07:23

0 Answers0