Center children if they don't fit the parent - html

Question

So my problem is that the parent has some width and if the screen cant fit everything the children (floated left) go one under the other (looks awesome as well) so I want them when they go one under the other to be centered in the parent.
Here is my code. I tried inline-block and it didn't help and so on
.mainpage-articles {
float:left;
width: 60%;
}
.mainpage-article {
width: calc(800px + 8%);
margin-left: auto;
margin-right: auto;
}
.mainpage-article .thumbnail {
position: relative;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mainpage-article .article {
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .article h1 {
height: 60px;
}
.mainpage-article .article p {
height: 120px;
}

Answer 1

You're probably wanting to learn media queries, to respond to the user's screen. Am I right? If it's that, take a look here: https://codepen.io/giovannipds/pen/BwqyLW
This is what you want to learn:
#media (max-width: 1500px) {
.mainpage-articles {
text-align: center;
}
}
This code align text things to the center when the user window's is at max 1500px, above that it doesn't. There are many ways to apply media queries. I recommend you to watch this to learn it a little better.
Full code of the example above:
<style>
.mainpage-articles {
background-color: #eee;
float: left;
width: 60%;
}
.mainpage-article {
background-color: cyan;
width: calc(800px + 8%);
margin-left: auto;
margin-right: auto;
}
.mainpage-article .thumbnail {
background-color: yellow;
position: relative;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mainpage-article .article {
background-color: #ccc;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .article h1 {
height: 60px;
}
.mainpage-article .article p {
height: 120px;
}
#media (max-width: 1500px) {
.mainpage-articles {
text-align: center;
}
}
</style>
<div class="mainpage-articles">
<div class="mainpage-article">
<div class="thumbnail">
<img src="//lorempixel.com/400/200" alt="">
</div>
<div class="article">
<h1>Lorem ipsum</h1>
<p>Dolor sit amet.</p>
</div>
</div>
</div>
There's an example here with Bootstrap 4 too:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.parent {
background-color: yellow;
}
.smth-else {
background-color: cyan;
}
.children {
margin: 75px !important;
}
.children [class^=col-] {
border: 1px solid red;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="parent col">
<div class="children row">
<div class="col-lg-6">
Children col 1
</div>
<div class="col-lg-6">
Children col 2
</div>
</div>
</div>
<div class="smth-else col">
Smth else
</div>
</div>
</div>
Your code is not so pretty, you should adapt them to use media queries better.