Making my boxes responsive in css - css

Question

I have 8 boxes on my html file, when viewing on the desktop, everything looks OK, visited on the mobile and the colums are way off than it should be, it should be in the center, not in the right side, how would i do that to make it responsive?
Preview
My code for the columns.
.articles {
margin: 100px;
background-color: #F5F5F5;
}
.article {
margin: 5px;
display: inline-block;
width: 340px;
position: relative;
float:left;
left: 155px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}
.article-image {
width: 100%;
}
.article-text-wrapper {
padding: 20px;
}
.article-title {
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 700;
}
.article-description {
font-family: 'Roboto', sans-serif;
line-height: 16px;
font-size: 16px;
color: rgba(0,0,0,0.7);
font-weight: 300;
}
.article-time {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: rgba(0,0,0,0.4);
font-weight: 300;
}
Thanks alot.

Answer 1

You have left and margin properties applied to your article elements. You will need to add a media query for the following:
#media only screen and (max-width:700px) {
.articles {
margin: 50px 0;
}
.article {
left: 0;
width:100%;
}
}

Answer 2

The problem is that your article has fixed width, float and is displayed as inline-block.
Try by adding the following media query:
#media only screen and (max-width : 768px) {
.article {
margin: 0 auto;
display: block;
width: 100%;
max-width: 340px;
float: none;
left: auto;
}
}

Answer 3

When making responsive web pages, add the following element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Set CSS width property is set to 100% for images, the image will be responsive and scale up and down. And also use max-width property.
For better responsive design use Media Queries.
#media screen and (max-width: 800px) {
.class-name {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
Refer here