Why my margin does not work?
I'm working on a navigation bar and have set a margin on the .headerContainer, but it doesn't seem to be taking effect. Could you help me understand if I'm doing something wrong?
Here is the codepen:
https://codepen.io/hackett-lai/pen/abebjow?editors=1100
Here is the codepen:
https://codepen.io/hackett-lai/pen/abebjow?editors=1100
<div class="headerContainer">
<img src="https://i.imgur.com/kF6nml7.png" />
<div class="nav-list">
<button class="menu-btn currentPage" active>ABC</button>
<button class="menu-btn">DEFG</button>
<button class="menu-btn">HIJ</button>
</div>
</div>body,
html {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
width: 100%;
}
.headerContainer {
background-color: yellow;
width: 100%;
padding: 20px 0px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0px 20px;
}
.headerContainer img {
height: 54px;
margin-right: auto;
}
.nav-list {
display: flex;
flex-direction: row;
align-items: center;
}
.menu-btn {
height: fit-content;
padding: 4px 8px;
font-size: 16px;
color: var(--grey-text);
background-color: transparent;
border: none;
cursor: pointer;
transition-duration: 0.3s;
border-radius: 4px;
display: block;
}
.menu-btn:hover,
.currentPage {
background-color: var(--main-green-0);
color: var(--white);
}
:root {
/* color theme */
--white: hsl(0, 0%, 100%);
--main-green-0: hsl(80, 60%, 50%);
--grey-text: hsl(0, 0%, 38%);
}
