I have this, html and css
<div class="Mycontainer">
<div class="avatar">
<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/apple-app-store.svg" class="background" />
<img alt="Avatar" src="https://cdn.svgporn.com/logos/apple-app-store.svg" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/airbnb.svg" class="background" />
<img alt="Avatar" src="https://cdn.svgporn.com/logos/airbnb.svg" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/figma.svg" class="background" />
<img alt="Avatar" src="https://cdn.svgporn.com/logos/figma.svg" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/atom-icon.svg" class="background" />
<img alt="Avatar" src="https://cdn.svgporn.com/logos/atom-icon.svg" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/gitlab.svg" class="background" />
<img alt="Avatar" src="https://cdn.svgporn.com/logos/gitlab.svg" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="https://cdn.svgporn.com/logos/google-cloud.svg" class="background" />
<img alt="Avatar" src="https://cdn.svgporn.com/logos/google-cloud.svg" width="100" height="100" />
</div>
</div>
<style>
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
width: 200px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
place-items: center;
}
</style>it doesn't go to the center of the page, it only goes to the top left. how can I fix this with css? I set the width of Mycontainer to 200px width, which i think is the problem, but i cannot have it any bigger, as i need it to be centered to my page, but with a specific set width. Is this possible?
