<div id="gym" class="main_container">
        <div id="gym_activity_title_hours_pic" class="activity_title_hours_pic">
            <!-- <div id="gym_title_hours" class="activity_title_hours"> -->
                <div id="gym_title" class="activity_title">
                    The Gym
                </div>
                <div id="gym_hours" class="activity_hours">
                    5 Hours
                </div>
            <!-- </div> -->
            <div id="gym_pic" class="activity_pic">
                <img src="./images/gym.jpg" class="pic"/>
            </div>
        </div>
    </div>

.main_container {
    width: 40%;
    height: 40%;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.activity_title_hours_pic {
    display: inline;
}

.activity_title_hours {
    float: left;
    width: 50%;
}

.activity_title {
    /* float: left; */
    float: left;
    width: 50%;
}

.activity_hours {
    /* float: left; */
    float: left;
    width: 50%;
}

.activity_pic {
    float:right;
    width: 50%;
}
.pic {
    box-sizing: border-box;
    margin-top: 1%;
    height: 10%;
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    background-repeat:no-repeat;
    background-size:cover;
}