https://i.sstatic.net/z2yC7.png Here is a visual representation of my current grid layout. I successfully changed the position of the picture with the pfp-div class, but I am encountering issues changing the text position with the profile-p-name-div class (I want to move nested DIV containers within a larger DIV container). All smaller div containers have a distinct red border for visibility, while the largest DIV container has a blue border.
Here's an excerpt of my CSS code:
.profile-preview-div {
display: inline-block;
border-color: blue;
border-style: solid;
border-radius: 20px;
display: grid;
grid-template-columns: 20% 40% 40%;
grid-template-rows: repeat(3, 40px);
width: 200px;
zoom: 2;
}
.pfp-div {
border-color: red;
border-style: solid;
border-radius: 5px;
width: 35px;
height: 39px;
margin: 0;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
/* Other CSS classes... */
.profile-p-info {
border-color: red;
border-style: solid;
border-radius: 5px;
width: 80%;
}<!doctype html>
<html>
<head>
<title>
Updated Layout
</title>
<script src="java.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile-preview-div">
<div class="pfp-div">
<img src="/pfps/pic1.png" class="pfp-preview">
</div>
<div class="profile-p-info">
<div class="profile-p-name-div">
<p class="profile-p-name">asd_adventure</p>
</div>
<div class="profile-p-desc-div">
<p class="profile-p-desc">i really like pizza lol</p>
</div>
<div class="profile-p-stats-div">
<p class="profile-p-stats">Followers: 40</p>
<p class="profile-p-stats">Following: 30</p>
</div>
</div>
<script>
</script>
</body>
</html>Despite my attempts to center the text, it doesn't seem to be working as intended. The image positioning was successful, so I'm unsure what the issue could be with the text alignment.