Issue facing in Css grid in wordpress - css

Question

I hope all are doing well, I am working on WordPress I have written an HTML markup for grid where at single row 2 images are need to show but the they are vertical showing each row a single image I want grid
<div class="our-specialties Container">
<h3 class="primary-text"> Pizzas </h3>
<div class="container-grid">
<?php
$args = array(
'post_type' => 'specialties',
'post_per_page' => 10,
'orderby' => 'title',
'order' => 'ASC',
'category_name'=> 'pizza'
) ;
$pizzas = new WP_Query($args);
while($pizzas->have_posts()): $pizzas->the_post(); ?>
<div class="columns2-4">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('specialties'); ?>
<h4><?php the_title(); ?><span><?php the_field('price');?></span> </h4>
<?php the_content(); ?>
</a>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<h3 class="primary-text"> Others </h3>
<div class="container-grid">
<?php
$args = array(
'post_type' => 'specialties',
'post_per_page' => 10,
'orderby' => 'title',
'order' => 'ASC',
'category_name'=> 'other'
) ;
$pizzas = new WP_Query($args);
while($pizzas->have_posts()): $pizzas->the_post(); ?>
<div class="columns2-4">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('specialties'); ?>
<h4><?php the_title(); ?><span><?php the_field('price');?></span> </h4>
<?php the_content(); ?>
</a>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
</div>
code for the style sheet
#media only screen and (min-width:768px){
.container-grid{
margin-left: -10px;
margin-right: -10px;
}
.container-grid::after{
content:'';
display: block;
clear: both;
}
[class*='columns']{
padding: 0 10px;
float: left;
}
.columns2-4{
width: 50%;
}
}
here the images are show single at each row means a vertical one by one images are there, let me know where i am making mistake code looks perfect, the above css codes with classes in html is described, any trick so to solve css
i am creating a menus section, i am following an author but he has different result for the same code i have different

Answer 1

add box-sizing: border-box; to your column like this :
.container-grid {
margin-left: -10px;
margin-right: -10px;
}
.container-grid::after {
content: '';
display: block;
clear: both;
}
[class*='columns'] {
padding: 0 10px;
float: left;
box-sizing: border-box;
}
.columns2-4 {
width: 50%;
}
img {
max-width: 100%;
}
<div class="our-specialties Container">
<h3 class="primary-text"> Pizzas </h3>
<div class="container-grid">
<div class="columns2-4">
<a href="#">
<img src="http://lorempixel.com/200/200/" />
<h4>title<span>20 $</span> </h4>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</a>
</div>
<div class="columns2-4">
<a href="#">
<img src="http://lorempixel.com/200/200/" />
<h4>title<span>20 $</span> </h4>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</a>
</div>
<div class="columns2-4">
<a href="#">
<img src="http://lorempixel.com/200/200/" />
<h4>title<span>20 $</span> </h4>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</a>
</div>
<div class="columns2-4">
<a href="#">
<img src="http://lorempixel.com/200/200/" />
<h4>title<span>20 $</span> </h4>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</a>
</div>
</div>
</div>