Почему мои вложенные CSS переопределяется внешним CSS? ⇐ Html

[Anonymous]

У меня есть ряд линии квадратных плиток (Tile) Dup, чтобы получить нижнюю часть экрана. Эти плитки вложены внутри контейнера (.contentContainerBottom), работающего по нижней части экрана. Каждая плитка имеет ключевую информацию, время начала и окончания, название события, и собирайте время (событие-конгретирование) со временем последующего наблюдения (следующее соглашение). < /P>
Я пытаюсь; Это работает нормально. < /P>
< /li>
[*] время начала и окончания, чтобы быть в верхнем левом и правом углу ретроспективно с меткой «Бесплатный период», где это применимо. Это работает нормально.

Имя события, которое должно быть центрировано горизонтально ниже информации в точке № 2 в качестве фиксированного положения, с его собственным размером шрифта и форматом. /> < /li>
Следующая конгрессация, которая будет центрироваться горизонтально и размещать под соревнованиями со своим собственным размером шрифта и форматом. плитка. Надеюсь, это имеет смысл. < /P>
Запись задания: < /p>

Я пытался переопределить и реструктурировать CSS, но, кажется, не могу получить визуальный вид, который мне нужен. ПРИМЕЧАНИЕ НЕ ВСЕ СОБЫТИЕ ВРЕМЯ НЕКОТОРЫЕ ВРЕМЯ НЕКОТОРЫЕ ВРЕМЯ (СЛЕДУЮЩАЯ КОНГРЕГАЦИЯ), поэтому, если существует следующая конгрегация, оно подталкивает информацию в пункте 3 и № 4, поэтому создает вертикальное неправильное предложение, что приводит к всему событию. параметры. Я думал, что параметры, раскрытые позже в CSS, имеют прецедент - я должен ошибаться здесь? Установите задачи задачи? Этот макет является частью более широкой компоновки экрана (вертикальная панель/контейнер), которая, кажется, работает нормально. Единственное отличие, которое я имею между вертикальной и нижней, - это следующая настройка; < /p>
Вертикальная панель

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

, за которым следует вложенный s
нижняя панель

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

< /code> с последующим вложенным  < /code> s < /p>
В основном обе панели отображают одну и ту же информацию с вертикальной, показывающей некоторую дополнительную информацию.  PrettyPrint-Override ">/* ==========================
✅ Base Layout Styles
========================== */
html, body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
height: 100vh;
width: 100vw;
background-color: black;
}
/* ==========================
✅ General Tile Styles
========================== */
.event-tile {
flex: 1;
text-align: center; /* Center text horizontally */
display: block; /* Reset to block if flex was causing issues */
padding: 1px;
margin: 1px;
border-radius: 5px;
font-size: 2rem;
color: white;
flex-shrink: 0;
overflow: hidden;
/* white-space: nowrap; Wrap the event name tp new line if req'd.*/
text-overflow: ellipsis;
position: relative;
z-index: 1; /* Lower z-index than the date-time element */
}

/* ==========================
✅ Bottom Container - Single Row Layout
========================== */
.contentContainerBottom {
display: flex;
position: relative; /* Ensure child elements can be positioned absolutely */
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch; /* Ensure all tiles are same height */
height: 15vh;
width: 100vw;
background-color: #333;
padding: 5px;
box-sizing: border-box;
}
#contentContainerBottom .event-tile {
width: auto;
max-width: 100%;
font-size: calc(1rem + 0.3vw); /* Adjust font size dynamically */
overflow-wrap: break-word; /* Prevent overflow */
}

#contentContainerBottom .event-header {
display: flex;
position: relative;
width: 100%;
flex-direction: column; /* Align children vertically */
justify-content: space-around; /* Distribute children evenly */
align-items: center; /* Center children horizontally */
height: 100%; /* Ensure it takes the full height of the parent */
}

#contentContainerBottom .schedule .event-name {
font-size: 0.7em;
padding: 1px;
font-weight: bold;
background-color: green;
}

#contentContainerBottom .event-congregation {
color: #FFD700;
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
font-size: 2rem;
font-weight: bold;
margin-top: 5px;
text-align: center;  /* Fallback for older browsers */
}

#contentContainerBottom .next-congregation {
font-size: 1.5rem;
color: #FFD700;
}

/* ==========================
🎨 Tile Status Colors
========================== */
.tile-past {
background-color: #555;
}

.tile-current {
background-color: #4CAF50;
}

.tile-upcoming {
background-color: darkorange;
}

.tile-future {
background-color: #2196F3;
}

.tile-alert {
background-color: darkred;
}< /code>


7:36 PM
FREE PERIOD
7:51 PM

Sunset Workout
7:36 PM
7:38 PM



7:46 PM
9:20 PM

Evening Workout
7:46 PM
7:48 PM



9:20 PM
11:59 PM

Night Workout
9:20 PM

Прикрепленная скриншот моей попытки до сих пор и показывает смещения в нижнем контейнере.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... er-div-css