title: Why is my flex styling going over my nav bar when in mobile
body: <p>So I have tried using flex styling to center my page which is what a lot of other experts have been telling me in past forums and never use floats. A lot of people suggest either using grid or flex depending on the situation when reducing the page from desktop to tablet and mobile for responsive website.</p>
  
  <p>Here is what I was attempting to do and I got what I like in desktop.</p>
  
  <p><a href="https://i.stack.imgur.com/wz5Ia.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wz5Ia.jpg" alt="enter image description here"></a></p>
  
  <p>Now the text went over the nav bar in mobile. I would like the image to stack on top and the text on the bottom. How do I fix that? And one more thing. When I tap on my hamburger icon, it blocks out the text and I would like to know how you can bring that down below the nav menu when I expand my menu. I know you can use media queries for when it reaches a certain amount of pixels, but I am not sure specifically what code to use. I know there is one that I like for example which is</p>
  
  <pre><code>display: block;
  </code></pre>
  
  <p>which works well when it is in a grid instead of flex.</p>
  
  <p><a href="https://i.stack.imgur.com/HiU7L.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HiU7L.jpg" alt="enter image description here"></a></p>
  
  <p>Take a look at my code and tell me what can I do to fix this issue? Here is where I got the idea from using flex. <a href="https://css-tricks.com/centering-css-complete-guide/" rel="nofollow noreferrer">https://css-tricks.com/centering-css-complete-guide/</a></p>
  
  <p><strong>1.</strong> Click on <strong>Both Horizontally and Vertically</strong></p>
  
  <p><strong>2.</strong> Then click on <strong>Can you use flexbox</strong></p>
  
  <p><strong>HTML</strong></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;div class="flex-Summary"&gt;
  
    &lt;div style="float: left;"&gt;
      &lt;img src="img/wallpaper1.jpg" style="width: 170px; height: 170px; border-radius:50%;"&gt;
    &lt;/div&gt;
  
    &lt;div style="float: right;"&gt;
      &lt;h2&gt;Summary&lt;/h2&gt;
      &lt;p style=" font-size: 20px;"&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing 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;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>CSS</strong></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-css lang-css prettyprint-override"><code>.flex-Summary {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
  }</code></pre>
  </div>
  </div>
  </p>