React-Router-Dom Link changes position of my button

Question

I have my custom css made button centered using flex in my parent container, when I wrap the button in the React-Router-Dom Link it moves to the right side of the screen.

Anyone know a quick fix for this, found alot of stack overflow posts about getting rid of text-decoration that React-Router-Dom Link adds and tried to apply these workarounds but in terms of getting rid of any potential margin or padding but did not help.

Will be making a code sandbox and posting link here

• Also just a sidenote, the scroll bars are activated even though in my project on my localhost they aren't and should not be. Can anyone explain why this is happening?

• And for reference this design is atm developed mobile first and I have not done the media queries for tablet or desktop yet

ProLandingPage.js

import React from 'react'
import Container from '../LandingPageComponents/Container';
import styled from 'styled-components'
import image from '../Assets/foodImage.jpg'
import  {Link} from "react-router-dom";

export const ProLandingPage = () => {
    return (
        <div>
            <Container>
                <TopBar/>
                <MenuButtonText>
                    Menu
                </MenuButtonText>
                <ContactButtonText>
                    Contact
                </ContactButtonText>
                <Title>
                    Authentic Asian Cuisine Delivered Straight To Your Door!
                </Title>
                <Image/>
                <Subtitle>
                    Cuisines spanning China, Japan and South East Asia...
                </Subtitle>
                <Link to="/menu">
                    <Button type="button">
                        <ButtonText>
                            Order Now!
                        </ButtonText>
                    </Button>
                </Link>


            </Container>
            
        </div>
    )
}



const TopBar = styled.div`
    position: absolute;
    top: 0;
    height: 70px;
    width: 100%;
    background: #161616;
`
const BottomBar = styled.div`
    position: absolute;
    
`

const Image = styled.div`
    position: absolute;
    width: 171.45px;
    height: 296px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    top: 27%;

    background-image: url(${image});
    background-position: center;
    background-size: cover;
    border-radius: 46px;
    transform: rotate(-89.85deg);

    @media (max-width: 281px){
        width: 150px;
        height: 250px;
        top: 30%;
    }
`
const Title = styled.div`
    position: absolute;
    width: 250px;
    height: 168px;
  
    top: 17%;

    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 36px;
    /* or 150% */

    text-align: center;

    color: #000000;
`
const Subtitle = styled.div`
    position: absolute;
    width: 255px;
    height: 78px;
    
    top: 65.5%;

    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 30px;
    /* or 167% */

    text-align: center;

    color: #000000;

    @media (max-height: 601px){
        top: 70%;
    }
`
const Button = styled.div`
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    /* left: 28%; */
    width: 178px;
    height: 48px;
    top: 78%;
    
    background: #161616;
    border-radius: 25px;

    @media (max-height: 601px){
        top: 83%;
    }
`

const ButtonText = styled.div`
    position: relative;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    text-align: center;

    color: #F9F9F9;
`
const MenuButtonText = styled.div`
    position: absolute;
    width: 126px;
    height: 42px;
    left: 20%;
    top: 23px;

    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 40px;
    /* or 250% */

    text-align: center;

    color: #F9F9F9;

    @media (max-width: 281px){
        left: 10%;
    }
`
const ContactButtonText = styled.div`
    position: absolute;
    width: 126px;
    height: 42px;
    right: 20%;
    top: 23px;

    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 40px;
    /* or 250% */

    text-align: center;

    color: #F9F9F9;

    @media (max-width: 281px){
        right: 10%;
    }

`

Answer 1

Add the link like this

<Link style={{ width: "100%", display: 'flex', justifyContent: 'center' }} to="/menu">
  <Button type="button">
    <ButtonText>Order Now!</ButtonText>
  </Button>
</Link>