Почему мой текст не идет рядом с моим списком IMG в CSS ⇐ CSS

[Anonymous]

Я продолжаю размещать свои тексты в абсолютно, просто чтобы поместить его рядом с моим списком IMG, и я понял, как обойти его в моем индексе. Html, но я наткнулся на огромную проблему в моей Karina.html, когда мне нужно, чтобы тексты были прямо рядом с моим списком участников. />

Код: Выделить всё

body {
background-color: #1d0035;
}
/*GROUP PAGE/FRONT PAGE */
.members-list {
margin-top: 10%;
}

.aespalogo {
width: 15%;
height: auto;
float: left;
display: block;
margin-left: 42px;
}

.content {
padding: 1%;
}

.members ul li img {
width: 310px;
height: 160px;
}

ul {
list-style-type: none;
}

.topnav ul li {
margin: 0 15px;
font-size: 25px
}

.topnav {
display: inline-block;
margin: 0;
padding: 10px;
align-items: center;
position: absolute;
top: 30px;
right: 10px;
padding: 10px;
width: auto;
}

.topnav ul {
position: relative;
}

.topnav ul {
margin: 0;
padding: 10px;
list-style: none;
display: flex;
gap: 20px;
background: rgba(255,255,255,0.85);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.topnav ul li {
position: relative;
font-size: 20px;
}

.topnav ul .dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
min-width: 160px;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
z-index: 100;
padding: 8px 0;
opacity: 0;
pointer-events: none;
}

.topnav ul li:hover > .dropdown {
display: block;
opacity: 1;
pointer-events: auto;
}

.topnav ul .dropdown li {
display: block;
margin: 0;
padding: 0;
}

.topnav ul .dropdown a {
display: block;
padding: 12px 24px;
color: #433E42;
text-decoration: none;
white-space: nowrap;
font-size: 18px;
border-radius: 4px;
}

.topnav ul .dropdown a:hover {
background: #dc4eff;
color: #fff;
}

.topnav a {
text-decoration: none;
color: #433E42;
padding: 8px 16px;
border-radius: 4px;
}

.topnav a:hover {
background: #dc4eff;
color: #fff;
}
/*GROUP PAGE/FRONT PAGE CONTAIN*/
.intro { /* 6/5/25 I used vw as a way to minimize the font when the window is smaller*/
position: absolute;
top: 45%;
right: 5%;
width: 90%;
max-width: 600px;
display: flex;
flex-direction: row;
align-items: flex-start;
font-size: 1.5vw;
font-family: 'Renogare Soft', sans-serif;
font-weight: 400;
font-style: normal;
}

.intro h1 {
margin: 0;
font-weight: 700;
color: #f0a4ff;
text-shadow: 3px 3px 10px #b23eff;
text-align: right;
}

.member-img {
position:relative;
display: inline-block;
transition: transform 0.3s;
}

.member-img img {
transition: transform 0.3s, box-shadow 0.3s;
border-radius: 16px;
display: block;
}

.member-img .see-member {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #ff04c0;
padding: 10px 24px;
border-radius: 24px;
font-size: 1.2em;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
font-family: 'Renogare Soft', sans-serif;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
}

.member-img:hover img {
transform: scale(1.12);
box-shadow: 0 8px 32px rgba(204, 0, 255, .5);
z-index: 2;
}

.member-img:hover .see-member {
opacity: 1;
}

.groupinformation { /* 6/5/25 I had made th einformation have a white rounded rectangle and imported the fonts I also formatted the text to wrap with the box as it wouldn't I searched up how to do it and experimented with different ways */
display: inline-block;
margin-left: 1%;
margin-top: 0;
width: 97%;
height: fit-content;
text-align: left;
background: #ffffff;
border-radius: 24px;
padding: 24px 25px;
box-shadow: 0 4px 24px rgba(255, 255, 255, 0.15);
max-width: 100vw;
box-sizing: border-box;
word-break: break-word;
word-wrap: break-word;
hyphens: auto;
font-size: 1vw;
font-family: 'Renogare Soft', sans-serif;
font-weight: 400;
font-style: normal;
text-shadow: rgb(134, 35, 158,0.25) 2px 2px 2px ;
margin-bottom: 1%;
}

.groupgallery { /* 6/5/25 I had mad e agallery to show what the look like it is placed bside the information, i formatted it into a grid*/
position:relative;
float: right;
top: 96%;
right: 5%;
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 10px;
column-gap: 30px;
}
.groupgallery img {
width: 105%;
height: 180px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.groupgallery img:last-child { /* 6/5/25 this makes the aespa 7th picture go be as wide as the two collumns combined*/
grid-column: 1 / span 2;
height: 350px;
width: 102%;
padding-top: -20px;
}

.aespavideo { /* 6/5/25 I added a video as a way to fill up space */
top: 157%;
margin-left: 2%;
position: inline-block;
}
/*GROUP PAGE/FRONT PAGE */

#main-info-style {
position: relative;
padding: 40px 0 0 25%;
}

#main-info-style h1 {
color: #fff;
font-size: 10vw;
position: absolute;
left: 25%;
top: 20%;
display: block;
}

#main-info-style p {
color: #fff;
font-size: 2vw;
line-height: 1.4;
padding: 5px 24px;
margin: 0;
position: absolute;
left: 25%;
top: 50%;
height: auto;
}< /code>






₊˚⊹ ᰔ AESPA
[*]





.information-part {
margin-left: 2%;
height: fit-content;
width: 70%;
text-align: left;
margin-top:  0;
}




[img]aespalogo.png[/img]


[list]
[url=index.html]AESPA[/url]
[*][url=#]Members[/url]

[url=karina.html]Karina[/url]
[*][url=giselle.html]Giselle[/url]
[*][url=winter.html]Winter[/url]
[*][url=ningning.html]Ningning[/url]
[/list]
[*][url=https://aespa.com]Website[/url]





@import url('https://fonts.cdnfonts.com/css/renogare-soft');


[url=karina.html]

[img]karina.png[/img]
See Member

[/url]

[*]
[url=giselle.html]

[img]giselle.png[/img]
See Member

[/url]

[*]
[url=winter.html]

[img]winter.png[/img]
See Member

[/url]

[*]
[url=ningning.html]

[img]ningning.png[/img]
See Member

[/url]

[/list]




Karina
Stage Name: Karina
Full Name: Yoo Ji-min
Birthday: April 11 2000
Age: 25
Position: Leader, main rapper, and a dancer
Other groups: Girls on Top, GOT the Beat

Подробнее здесь: https://stackoverflow.com/questions/796 ... ist-in-css