title: Im using bootstrap but still not flex
body: <p>here is my <code>index.html</code>:</p>
  <pre><code>    &lt;div id=&quot;container1&quot; class=&quot;py-0 my-0&quot;&gt;
          &lt;div id=&quot;left&quot; class=&quot;col-md-6&quot;&gt;
              &lt;img class=&quot;image&quot; src=&quot;C:\Users\asus\Desktop\project\image.png&quot;&gt;
          &lt;/div&gt;
  
              &lt;div id=&quot;right&quot; class=&quot;col-md-6&quot;&gt;
  
                  &lt;nav class=&quot;navbar navbar-expand-lg&quot;&gt;
  
                      &lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
                          &lt;li class=&quot;nav-index&quot;&gt;
                              &lt;a href=&quot;./index.html&quot; class=&quot;nav-link&quot;&gt;HOME&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li class=&quot;nav-index&quot;&gt;
                              &lt;a href=&quot;./pages/aboutUs.html&quot; class=&quot;nav-link&quot;&gt;ABOUT US&lt;/a&gt;
                          &lt;/li&gt;
                                          
                          &lt;li class=&quot;nav-index&quot;&gt;
                              &lt;a href=&quot;./pages/courses.html&quot; class=&quot;nav-link&quot;&gt;COURSES&lt;/a&gt;
                          &lt;/li&gt;
  
                          &lt;li class=&quot;nav-index&quot;&gt;
                              &lt;a href=&quot;./pages/login.html&quot; class=&quot;nav-link&quot;&gt;LOG IN&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/nav&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
              &lt;p class=&quot;paragraph col-md-6&quot;&gt;
                  &lt;h3 class=&quot;Welcome text-center&quot;&gt;Welcome to mobile legends!&lt;/h3&gt;
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              &lt;/p&gt;
  &lt;br&gt;
  &lt;br&gt;
              &lt;footer class=&quot;footer1&quot; id=&quot;footer1&quot;&gt;
                  &lt;h6&gt;Contact the developer:&lt;/h6&gt;
                  &lt;p&gt;luckyllemos0909@gmail.com&lt;/p&gt;
              &lt;a href=&quot;#&quot; class=&quot;fa fa-facebook&quot;&gt;&lt;/a&gt;
              &lt;a href=&quot;#&quot; class=&quot;fa fa-linkedin&quot;&gt;&lt;/a&gt;
              &lt;a href=&quot;#&quot; class=&quot;fa fa-youtube&quot;&gt;&lt;/a&gt;
              &lt;/footer&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>here is my <code>style.css</code>:</p>
  <pre><code>*{
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
  }
  html, body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
    vertical-align: middle;
  }
  
  #container1{
    width: 100%;
    height: 100%;
    vertical-align: middle;
    display: flex;
    align-items: center;
  }
  
  #left,
  #right {
    width: 50%;
    height: 100%;
  }
  
  #left {
    background: #ffd6dd;
    align-items: center;
  }
  .image{
    margin-top: 50px;
    margin-left: -10px;
    padding: 100px;
  }
  #right {
    background: #FBAED2;
    align-items: center;
  }
  
  .paragraph{
    color: red;
    margin: 50px;
  }
  
  .fa {
    margin-top: none;
    padding: 20px;
    font-size: 20px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
  }
  .fa:hover {
      opacity: 0.7;
  }
  .fa-facebook {
    color: #000000;
  }
  
  .fa-linkedin {
    color: #000000;
  }
  
  .fa-youtube {
    color: #000000;
  }
  
  .Welcome{
    margin-left:60px;
  }
  
  .nav-link{
    color: #000000;
  }
  .nav-index{
    padding-left: 30px;
    padding-right: 30px;
    align-items: center;
  }
  </code></pre>
  <p>my problem is when i put it in mobile phone it does not go flexible.
  This is the original output: <a href="https://i.stack.imgur.com/JNOPr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JNOPr.png" alt="enter image description here" /></a>
  and This what happens when try to look on mobile screen:<a href="https://i.stack.imgur.com/EWfHz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EWfHz.png" alt="enter image description here" /></a></p>