你应该试试这个，
这是更新的outdoor类CSS

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

这是完整的输出，
x一个一个一个一个x一个一个二个x

更改你的css代码到这：

.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%;

}

你可以使用100%宽度代替手动宽度。px宽度是元素的永久大小。你可以使用百分比宽度，所以它工作正常

/*------------------------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 class="outdoor">
        <div class="Kayaking">
            <img id="kayak" class="img-set" 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 class="Hiking">
            <img id="hiking" class="img-set" 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 class="museums">
            <img id="museums" class="img-set" 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>

您可以使用媒体查询根据屏幕调整列

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