Question Summary: I cannot figure out why the images on my webpage are only centered when the screen is smaller vs on my desktop, where the images are left-aligned.
Question Body: I am building a website using HTML and CSS for the first time, and while I'm taking lots of tutorials and reading resources, I am still confused on the concept of flex items. On my current website, I have three images horizontally lined up and they are centered when I view the page on a laptop. However, when I view it on my larger desktop, all of the images are left-aligned. I have scoured dozens of pages here about centering items in CSS but nothing is making sense so far -- that may be due to my own naivety with using CSS and HTML, however. I've posted my CSS and HTML code below. Do I have something in this code that is incorrectly left-aligning the images when I expand the screen? (Note: this is my first question on Stack Overflow and while I've read the guidelines for posting questions, I would love any feedback you have on how I can make this clearer). Thank you! (Also, FYI, since it's my first post I am not allowed to embed images yet, or else I would have screenshots of what I'm talking about).
/* Box Model */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Containers */
.container {
margin-left: auto;
margin-right: auto;
}
.container.\31 25\25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}
.container.\37 5\25 {
width: 60em;
}
.container.\35 0\25 {
width: 40em;
}
.container.\32 5\25 {
width: 20em;
}
.container {
width: 80em;
}
@media screen and (max-width: 1680px) {
.container.\31 25\25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}
.container.\37 5\25 {
width: 60em;
}
.container.\35 0\25 {
width: 40em;
}
.container.\32 5\25 {
width: 20em;
}
.container {
width: 80em;
}
}
@media screen and (max-width: 1280px) {
.container.\31 25\25 {
width: 100%;
max-width: 81.25em;
min-width: 65em;
}
.container.\37 5\25 {
width: 48.75em;
}
.container.\35 0\25 {
width: 32.5em;
}
.container.\32 5\25 {
width: 16.25em;
}
.container {
width: 65em;
}
}
@media screen and (max-width: 980px) {
.container.\31 25\25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container.\37 5\25 {
width: 67.5%;
}
.container.\35 0\25 {
width: 45%;
}
.container.\32 5\25 {
width: 22.5%;
}
.container {
width: 90%;
}
}
@media screen and (max-width: 736px) {
.container.\31 25\25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container.\37 5\25 {
width: 67.5%;
}
.container.\35 0\25 {
width: 45%;
}
.container.\32 5\25 {
width: 22.5%;
}
.container {
width: 90% !important;
}
}
@media screen and (max-width: 480px) {
.container.\31 25\25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}
.container.\37 5\25 {
width: 67.5%;
}
.container.\35 0\25 {
width: 45%;
}
.container.\32 5\25 {
width: 22.5%;
}
.container {
width: 90% !important;
}
}
/* Flex */
.flex {
display: -ms-flexbox;
-ms-flex-wrap: nowrap;
-ms-flex-pack: justify;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
max-width: 900px;
min-width: 500px;
}
.flex.flex-2 {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
.flex.flex-2 article {
width: 100%;
}
@media screen and (max-width: 980px) {
.flex.flex-2 article {
width: 100%;
margin-bottom: 3em;
auto
}
.flex.flex-2 article:last-child {
margin-bottom: 0;
auto
}
}
@media screen and (max-width: 480px) {
.flex.flex-2 br {
display: none;
}
}
/* Box */
.box {
border: solid 1px #dbdbdb;
margin-bottom: 2em;
padding: 1.5em;
}
.box> :last-child,
.box> :last-child> :last-child,
.box> :last-child> :last-child> :last-child {
margin-bottom: 0;
}
.box.alt {
border: 0;
border-radius: 0;
padding: 0;
}
.box.person {
border: solid 1px #8dcca9;
padding: 3em 1.5em;
}
.box.person h3 {
margin: 0;
}
.box.person .image {
margin-bottom: 1em;
}
.box.person .image img {
max-width: 100%;
}<!-- Main -->
<section id="main" class="wrapper">
<div class="inner">
<header class="align-center">
<h2>A comprehensive collection of workshops, webinars, and resources for Belmont Forum researchers</h2>
</header>
<section id="three" class="wrapper align-center">
<div class="inner">
<div class="flex flex-2">
<article>
<div class="w3-circle">
<img src="images/globe.jpg" alt="Pic 02" />
</div>
<header>
<h3>By Country/Region</h3>
</header>
<footer>
<a href="Data_Management_Trainings.md" target="_blank" class="button">Find Resources</a>
</footer>
</article>
<article>
<div class="w3-circle">
<img src="images/computer.jpg" alt="Pic 01" />
</div>
<header>
<h3>By Resource Type</h3>
</header>
<footer>
<a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf" target=_blank " class="button ">Find Resources</a>
</footer>
</article>
<article>
<div class="w3-circle ">
<img src="images/business_woman.jpg " alt="globe " />
</div>
<header>
<h3>By Role</h3>
</header>
<footer>
<a href="http://bfe-inf.org/sites/default/files/doc-repository/Outline_Data_Skills_Curricula_Framework.pdf " target=_blank" class="button">Find Resources</a>
</footer>
</article>
</div>
</div>
</section>.inner {
display: flex;
justify-content: center;
}
Your .flex .flex-2 div is left aligned because its parent div .inner is rendering its contents from left to right (which is the default behaviour of a block element) & your div is bound to a specific width.
Flexbox is all about using parent containers to align their children elements - justify-content & align-items can be used to center your elements from a parent element. :)