title: Image Flexbox Styling Not Working in Github Markdown
body: <p>I wanted to make my github markdown responsive when viewed on different screens<br />
  so, I added css flexbox to the images.<br />
  It works fine when I try md preview in VS Code,<br />
  but after I push all changes on github, then the styling are not working properly</p>
  <p>Does the style tag works as normally other html tags works?</p>
  <p><strong>Or Is there any other good way to present screenshots in readme file, Like showing small tiles in readme and expanding them when clicked.    Some help will be appreciated </strong></p>
  <p>code repo: <a href="https://github.com/sachuverma/React-E-Commerce-v2" rel="nofollow noreferrer">https://github.com/sachuverma/React-E-Commerce-v2</a><br />
  styles code:</p>
  <pre><code>.row-main {
    display: flex;
    flex-wrap: wrap;
  }
  
  .column-main {
    flex: 50%;
    padding: 10px;
  }
  
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  
  .column {
    flex: 33%;
    padding: 10px;
  }
  
  @media screen and (max-width: 600px) {
    .column{
      flex: 50%;
    }
  }
  
  @media screen and (max-width: 500px) {
    .row {
      flex-direction: column;
    }
    .column-main {
      flex: 100%;
    }
    .column{
      flex: 100%;
    }
  }
  
  img{
    opacity: 0.6;
    transition: all 0.3s linear;
  }
  
  img:hover{
    opacity: 1;
  }
  
  </code></pre>
  <p><strong>vs code preview</strong>
  <a href="https://i.stack.imgur.com/N6JUW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N6JUW.png" alt="vsc preview" /></a></p>
  <p><strong>github preview</strong>
  <a href="https://i.stack.imgur.com/Xysn2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xysn2.png" alt="github preview" /></a></p>