I've been struggling to align that button correctly, but I can't figure out how. Can anyone offer some guidance? I attempted using position:right on HomeButton, but it didn't work as expected. Below are my code snippets:
Header.styles.js
import styled from 'styled-components';
export const Wrapper = styled.div`
display:flex;
background-color: #a86332;
padding: 1%;
`
export const Title = styled.h1`
color: white;
margin:0;
`
export const HomeButton = styled.button`
border:2;
margin:10px 10px 10px 0;
height: 50px;
width: 50px;
background-color:#a86000;
border-color:white;
color:white;
cursor:pointer;
transition-duration:250ms;
&:hover{
height: 70px;
width: 70px;
margin:0 0 0 0;
color:black;
background-color:white;
border-color: red;
}
`
Header.js
import React from 'react'
import { HomeButton, Title, Wrapper } from './Header.styles'
const Header = () => {
return (
<Wrapper>
<Title>McKing Burger</Title>
<HomeButton >Home</HomeButton>
</Wrapper>
)
}
export default Header
Screen capturehttps://i.sstatic.net/kyKP3.png