Hello, I am facing an issue where my container is exceeding the maximum allowed width of my flex container (with justify space-between).
Essentially, I have divided my 3 children into equal parts of 33.33%, but the total width exceeds the limit:
Image:
https://i.stack.imgur.com/YfqRa.png
My JSX Code:
const NavAcessibility = props => {
return (
<Accessibility>
<ul>
<li>
<a>
<p>Accessibility</p>
</a>
</li>
<li>
<a>A-</a>
</li>
<li>
<a>A+</a>
</li>
<li>
<a>
<FontAwesomeIcon
className="adjust"
icon={faAdjust}
size="1x"
fixedWidth
color="white"
/>
</a>
</li>
</ul>
</Accessibility>
);
};
const ItemsTop = () => {
return (
<>
<ImgWrap>
<img src={LogoImg} />
</ImgWrap>
<SearchContainer>
<IconContainer>
<FontAwesomeIcon
className="searchIcon"
icon={faSearch}
size="2x"
fixedWidth
color="white"
/>
</IconContainer>
<input placeholder="Search" />
</SearchContainer>
</>
);
};
const TopHeader = () => {
return (
<ContainerTop>
<HeaderTop>
<ItemsTop />
<NavAcessibility />
</HeaderTop>
</ContainerTop>
);
};
My CSS:
export const ContainerTop = styled.div`
position: relative;
width: 100%;
background: red;
box-shadow: 0 0 5px rgba(18, 23, 39, 0.2);
`;
export const HeaderTop = styled.div`
${mxw80}
padding-bottom: 10px;
padding-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em 0;
`;
export const ImgWrap = styled.div`
width: 33.3333%;
display: flex;
align-items: center;
& > img {
width: 80px;
}
`;
export const IconContainer = styled.div``;
export const SearchContainer = styled.div`
display: inline-flex;
align-items: center;
width: 33.3333%;
border-radius: 25px;
overflow: hidden;
height: 50px;
border: 0;
background: rgba(0, 0, 0, 0.1);
box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.07);
transition: all 0.4s;
margin-right: 20px;
${IconContainer} {
${flexAlignCenter}
width: 50px;
padding: 0.5rem 1.3rem;
height: 100%;
& > svg {
font-size: 1.3em;
color: white;
}
}
& > input {
background: transparent;
width: calc(100% - 50px);
height: 100%;
border: 0;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
outline: none;
color: white;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: initial;
font-family: Roboto, Arial, sans-serif;
::placeholder {
font-size: 16px;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: initial;
font-family: Roboto, Arial, sans-serif;
}
}
`;
export const Accessibility = styled.nav`
width: 33.3333%;
height: 100%;
& > ul {
${flexAlignCenter}
width:100%;
flex-wrap: wrap;
height: auto;
justify-content: center;
}
& > ul > li {
position: relative;
display: inline-block;
font-family: "Open Sans", sans-serif;
font-size: 13px;
line-height: 24px;
color: #fff;
user-select: none;
}
& > ul > li:nth-child(2) {
cursor: not-allowed;
pointer-events: none;
font-size: 18px;
font-weight: 700;
font-style: italic;
opacity: 0.5;
padding: 0 9px;
}
& > ul > li:nth-child(3) {
font-size: 18px;
font-weight: 700;
font-size: 18px;
font-weight: 700;
padding: 0 9px;
}
& > ul > li > a {
font-family: "Open Sans", sans-serif;
font-size: 13px;
line-height: 24px;
}
& > ul > li > a > p {
position: relative;
display: inline-block;
pointer-events: none;
padding: 0 9px;
}
`;
Example:
I'm having trouble pinpointing the error in my code.