title: How to keep many image cards in a same line in HTML , CSS
body: <p>I have Created four cards in a same line in my html page.But when I resize(decrease window size) my window, the cards which are in right corner are going down.they don't stay in a line.How can I keep my all cards in a same line even if I resize my window?</p>
  
  <pre><code>&lt;div class="tab1cards"&gt;
                  &lt;div class="card"&gt;
                      &lt;img src="safari.jpg" alt="safari" style="width: 250px;"&gt;
                      &lt;h4&gt;&lt;b&gt;Wild Life&lt;/b&gt;&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="card"&gt;
                      &lt;img src="safari.jpg" alt="safari" style="width: 250px"&gt;
                      &lt;h4&gt;&lt;b&gt;Heritage&lt;/b&gt;&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="card"&gt;
                      &lt;img src="safari.jpg" alt="safari" style="width: 250px"&gt;
                      &lt;h4&gt;&lt;b&gt;Beach&lt;/b&gt;&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="card"&gt;
                      &lt;img src="safari.jpg" alt="safari" style="width: 250px"&gt;
                      &lt;h4&gt;&lt;b&gt;Sri lanka&lt;/b&gt;&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>this is style sheet</p>
  
  <pre><code>.card{
      float: left;
      padding: 16px;
      text-align: center;
  }
  </code></pre>