I have a problem , my logo image is not show , i am using React js.
and when i remove my display: flex; property then logo shown with very
bigger size. so this is the problem , why display: flex is not
working. ……………………here is my
code………………………
import React from ‘react’;
import styled from ‘styled-components’;
const Login = (props) =>{
return(
<Container>
<Nav>
<a href='/'>
<img src='/images/login-logo.svg' alt='' />
</a>
<div>
<Join>Join Now</Join>
</div>
</Nav>
</Container>
);
};
const Container = styled.div`
padding: 0px;
`;
const Nav = styled.nav`
max-width: 1128px;
margin: auto;
padding: 12px 0 16px;
display: flex;
align-items: center;
position: relative;
justify-content: space-between;
flex-wrap: nowrap;
& > a{
width: 135px
height: 34px;
@media(max-width: 768px){
padding: 0 5px;
}
}
`;
const Join = styled.a`
font-size: 16px;
padding: 10px 12px;
text-decoration: none;
border-radius: 4px;
color: rgba(0, 0, 0, 0.6);
margin-right: 12px;
&:hover{
background-color: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.9);
text-decoration: none;
}
`;
export default Login;