Javascript 应用程序返回错误“；您的用户照片IMG包装器尚未呈现为圆形；

我有一个问题，我正在承担的挑战：应用程序返回错误“您的用户照片IMG包装尚未呈现为一个圆圈”。我已经尝试并检查了大多数资源，但都被卡住了。我不知道这是否是一个视口问题，但我的测试一直失败

代码如下：

迷你应用程序
身体{
背景：薰衣草；
边际：0px；
溢出：隐藏
}
*{
保证金：0；
填充：0；
}
氢{
文本对齐：居中；
边缘底部：2.79em；
文本转换：大写；
}
部门用户照片{
宽度：150px；
高度：150像素；
保证金：1em自动；
背景：#fff；
溢出：隐藏；
边界半径：100%；
-webkit边界半径：60%；
-moz边界半径：60%；
}
部门详情{
字号：2.3em；
保证金：2.5em 0.2em 0.2em 0.2em；
颜色：#fff；
填充：0.2米；
显示器：flex；
最小高度：6em；
背景：#6200ee；
}
页脚{
宽度：钙（100%-2米）；
z指数：500；
位置：绝对位置；
底部：0；
溢出：隐藏；
显示器：flex；
证明内容：之间的空间；
边缘：0 1米；
}
页脚按钮.mdc-icon-button{
边缘：0.5em；
背景色：#573594；
}
img{
最大宽度：100%；
最大高度：100%；
显示：块；
}
伊布·奥曼卡·埃里克
家
电话
日期范围
const notify=（msg）=>{
const toastr=document.querySelector（'.messages'）；
如果（！toastr）返回；
toastr.textContent=msg；
如果（！toastr.classList.contains（'on'））{
toastr.classList.add（'on'）；
}
};
常量clearNotice=（）=>{
const toastr=document.querySelector（'.messages'）；
如果（！toastr）返回；
toastr.textContent=''；
toastr.classList.remove（'on'）；
};
const displayUserPhotoAndName=（数据）=>{
如果（！数据）返回；
//在这里添加您的代码
明确通知（）；
};
const getAUserProfile=（）=>{
常数api=https://randomuser.me/api/';
//在此处进行API调用
通知（`请求配置文件数据…`）；
};
常数startApp=（）=>{
//在这里调用getAUserProfile
};
startApp（）；

欢迎来到堆栈溢出。请在您的问题中具体说明，不鼓励使用“如何编写代码”类型的问题。请给你的答案加上一些解释。错误是什么？您的答案如何解决？虽然这可能是正确的答案，但请详细说明您的解决方案。

    div .user-photo {
    width: 150px;
    height: 150px;
    margin: 1em auto;
    background: #fff;
    border-radius: 50%;
    display: block;
    overflow: hidden;