Дисплей: Flex; не подбирается браузерам ⇐ Html

[Anonymous]

Я только что поймал свою ошибку. Это был дополнительный закрывающий тег Div. < /P>
Я создаю навигационную панель для веб -страницы. У меня есть класс NAV (Nav-Main-Menu), и он отображает Flex. В пределах класса NAV у меня есть другой класс (Nav-Main-CTA). Внутри класса Nav-Main-CTA у меня есть пара якорных тегов, которые я хочу форматировать в виде кнопок ... < /p>
Моя проблема заключается в том, что браузеры не поднимают гибкость дисплея для класса Nav-main-cta. < /P>

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

[url=index.html]
[img]images/logo_sm.png[/img]
[/url]
Sevier County Lions Club

[list]
[*][url=#]HOME[/url]
[*]
[url=#]SERVICES[/url]


[*][url=#]EVENTS[/url]
[*][url=#]GET INVOLVED[/url]
[*][url=#]ABOUT US[/url]



[url=#]Join[/url]
[url=#]Donate[/url]

< /code>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* ===== Reusable CSS ===== */
:root {
--color-primary-yellow: #ebb700;
--color-primary-yellow-light: hsl(47, 100, 46, 18% );
--color-primary-blue: #00338d;
--color-primary-blue-light: hsl(218,  100, 28, 18%);
--color-primary-gray: #55565a;
--color-primary-dark-gray: #262729;
--color-primary-gray-light: hsl(228, 3, 34, 18%);

--color-accent-blue: #407cca;
--color-accent-dark-blue: #0d2240;
--color-accent-cool-gray: #b3b2b1;
--color-accent-purple: #7a2582;
--color-accent-green: #00ab68;
--color-accent-orange: #ff5b35;
--color-white: #f2f2fe;
--color-bg-dark: #0f0f3e;
--color-bg-light: #f6f6f6;

--transition: all 300ms ease;

--container-width-lg: 74%;
--container-width-md: 88%;
--form-width: 40%;

--card-border-radius-1: 0.3rem;
--card-border-radius-2: 0.5rem;
--card-border-radius-3: 0.8rem;
--card-border-radius-4: 2rem;
--card-border-radius-5: 5rem;
}

/* ===== BODY ===== */

body{
background-color: var(--color-bg-light);
}

/* ===== REUSABLE CSS ===== */

a{
text-decoration: none;
color: var(--color-primary-dark-gray);
font-weight: 500;
}
ul{
list-style-type: none;
}

/* ===== NAVIGATION BAR ===== */
.header-main {
width: 100%;
height: 60px;
background-color: #f2f2fe;
color: var(--color-primary-dark-gray);
display: flex;
justify-content: space-between;
}
.nav{
display: flex;
justify-content: space-between;
align-items: center;
padding-inline: 3vw;
height: 70px;
background: var(--color-bg-light);
color: var(--color-primary-dark-gray);
}
.logo{
display: flex;
align-items: center;
}
.nav-main-menu{
display: flex;
}
.nav-link{
padding: 26px 10px;
margin-inline: 10px;
transition: .3s;
}

/* ===== CTA -NAV BAR ===== */

.nav-main-cta{
display: flex;
justify-content: space-between;
gap: 1rem;
width: fit-content;
height: 100%;

}
.nav-main-cta a {
width: fit-content;
align-self: center;
padding: 0 10px;
border-radius: 4px;
align-items: center;
}

.btn-join {
width: 100px;
height: 30px;
text-align: center;
align-content: center;
background-color:  #EBB700;
}

.btn-join:hover {
background-color:  #ffd643;
}

.btn-donate {
width: 100px;
height: 30px;
align-content: center;
text-align: center;
background-color:   #00338D;
color: #f2f2fe;
}

.btn-donate:hover {
background-color:   #3a69bb;
color: #f2f2fe;
}

Подробнее здесь: https://stackoverflow.com/questions/797 ... y-browsers