Картинка выходит за пределы блока
Картинка profile-avatar выходит за контейнер в котором находится, как будто с абсолютным позиционированием.
HTML
<div className="profile">
<div className="profile-container">
<div className='profile-about-left'>
<div className='profile-about-left-container visual-container'>
<img className='profile-avatar' src={photo} alt='avatar'/>
<button className='profile-editButton button'>Edit</button>
</div>
</div>
<div className="profile-about-right">
<div className='profile-about-right-container visual-container'>
<div className="profile_user-info">
<span className='profile-user-info_name'>{state.fullName}</span>
<ProfileStatus userId={state.userId} userOwnerId={userOwnerId}
status={status} updateProfileStatus={updateProfileStatus}/>
</div>
<div className="profile_user-job">
<span className='profile-lookJob'>{state.lookingForAJob}</span>
<span className='profile-jobDescription'>{jobDescription}</span>
</div>
<div>
<button className='profile-about-more button'>Show More</button>
</div>
</div>
</div>
</div>
</div>
CSS
.profile {
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: white;
border-radius: 5px;
display: flex;
padding: 2%;
align-items: flex-start;
}
.profile-container {
height: 100%;
display: flex;
width: 100%;
justify-content: space-between;
}
.profile-about-right {
width: 100%;
height: 100%;
margin-left: 1em;
}
.profile-about-right-container {
width: 100%;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
padding: 2%;
}
.profile-avatar {
height: 8em;
border-radius: 15px;
}
.profile-about-left {
height: 100%;
}
.profile-about-left-container {
padding: 10%;
}

