How can I space out my images evenly and center aligned?-CodePudding

Im trying to create a row of 3 images with text at the bottom. I got the images to line up next to each other but I'm having trouble spacing them out evenly. There is no space between the images at all and its not centered to the middle of the page. It's leaning more towards the left. How can I fix this? Thanks

/*------------------------Outdooor-----------------------------*/
.outdoor{
    padding: 50px;
    display:flex;
}
.Kayaking{
    width: 450px;
    text-align: center;
}
.Hiking{
    width: 450px;
    text-align: center;
}
.museums{
    width: 450px;
    text-align: center;
}
#kayak{
    height: 350px;
    width: 500px;
}
#hiking{
    height: 350px;
    width: 500px;
}
#museums{
    height: 350px;
    width: 500px;

}

 <section >
        <div >
            <img id="kayak" src="Images/Kayaking_Elliott_Bay_in_Seattle.jpg">
            <h1>Kayaking at Elliot Bay</h1>
            <p>Enjoy a wonder time kayaking at Elliot Bay. Best time to go
                right before sunset to see the sun go down behind the Mountians.
            </p>
        </div>
        <div >
            <img id="hiking" src="Images/RattlesnakeLedge_KatieEgresi_032321-scaled.jpg">
            <h1>Hiking at Rattlesnake Ledge</h1>
            <p>A hike at Rattlesnake Ledge is a must. Just 45 minutes West of
                Seattle, it's not too far to get away from the city and remain close.
            </p>
        </div>
        <div >
            <img id="museums" src="Images/Museum-of-Pop-Culture_2018_BuildingExterior.webp">
            <h1>Seattle Museum of Pop Culture</h1>
            <p>Explore modern pop Culture! Excellent location for family and kids.
                Located just one block away from the space needle
            </p>
        </div>
    </section>

CodePudding user response：

You should try this,

This is the updated outdoor class CSS

.outdoor{
    padding: 50px;
    display:flex;
    align-items:center;
    justify-content:space-evenly;
}

This is the complete output,

/*------------------------Outdooor-----------------------------*/
.outdoor{
    padding: 50px;
    display:flex;
    align-items:center;
    justify-content:space-evenly;
}
.Kayaking{
    width: 450px;
    text-align: center;
}
.Hiking{
    width: 450px;
    text-align: center;
}
.museums{
    width: 450px;
    text-align: center;
}
#kayak{
    height: 350px;
    width: 500px;
}
#hiking{
    height: 350px;
    width: 500px;
}
#museums{
    height: 350px;
    width: 500px;

}

<section >
        <div >
            <img id="kayak" src="Images/Kayaking_Elliott_Bay_in_Seattle.jpg">
            <h1>Kayaking at Elliot Bay</h1>
            <p>Enjoy a wonder time kayaking at Elliot Bay. Best time to go
                right before sunset to see the sun go down behind the Mountians.
            </p>
        </div>
        <div >
            <img id="hiking" src="Images/RattlesnakeLedge_KatieEgresi_032321-scaled.jpg">
            <h1>Hiking at Rattlesnake Ledge</h1>
            <p>A hike at Rattlesnake Ledge is a must. Just 45 minutes West of
                Seattle, it's not too far to get away from the city and remain close.
            </p>
        </div>
        <div >
            <img id="museums" src="Images/Museum-of-Pop-Culture_2018_BuildingExterior.webp">
            <h1>Seattle Museum of Pop Culture</h1>
            <p>Explore modern pop Culture! Excellent location for family and kids.
                Located just one block away from the space needle
            </p>
        </div>
    </section>

CodePudding user response：

changed your css code to this :

.outdoor {
    padding: 50px;
    display: flex;
    justify-content: center;
}

.Kayaking {
    width: 450px;
    text-align: center;
}

.Hiking {
    width: 450px;
    text-align: center;
    margin: 0 10px;
}

.museums {
    width: 450px;
    text-align: center;
}

#kayak {
    height: 350px;
    max-width: 100%;
}

#hiking {
    height: 350px;
    max-width: 100%;
}

#museums {
    height: 350px;
    max-width: 100%;

}

CodePudding user response：

You can use 100% width instead of manual width in px. px width is set permanent size of element. you can use width in percentage so it's working fine

/*------------------------Outdooor-----------------------------*/
.outdoor{
    padding: 50px;
    display:flex;
}
.Kayaking{
/***-- set width of column according to 3 divs --**/
    width: 33.333%;
    text-align: center;
/***-- Add padding for space because it's added inside your group --**/
    padding: 0 10px;
}
.Hiking{
/***-- set width of column according to 3 divs --**/
    width: 33.333%;
    text-align: center;
/***-- Add padding for space because it's added inside your group --**/
    padding: 0 10px;
}
.museums{
 /***-- set width of column according to 3 divs --**/
    width: 33.333%;
    text-align: center;
    /***-- Add padding for space because it's added inside your group --**/
    padding: 0 10px;
}

 /**---  Use common class for future,  it will help you when you add new imagebox into this group. ---**/
.img-set{
    width: 100%;
    height: auto;
}

<section >
        <div >
            <img id="kayak"  src="https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg">
            <h1>Kayaking at Elliot Bay</h1>
            <p>Enjoy a wonder time kayaking at Elliot Bay. Best time to go
                right before sunset to see the sun go down behind the Mountians.
            </p>
        </div>
        <div >
            <img id="hiking"  src="https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg">
            <h1>Hiking at Rattlesnake Ledge</h1>
            <p>A hike at Rattlesnake Ledge is a must. Just 45 minutes West of
                Seattle, it's not too far to get away from the city and remain close.
            </p>
        </div>
        <div >
            <img id="museums"  src="https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg">
            <h1>Seattle Museum of Pop Culture</h1>
            <p>Explore modern pop Culture! Excellent location for family and kids.
                Located just one block away from the space needle
            </p>
        </div>
    </section>

You can adjust columns according to your screen using media query

@media (width < 767px){
//Your Code
}