ReactJS and CSS rendering

Question

So I was designing a web app using React and I'm stuck on this issue. Given below is what is being rendered

As I've highlighted using the red rectangle, there is a cut off region in my footer component. I'm not sure what is causing this. The CSS and Component code is as given below

import styled from 'styled-components';

export const Background = styled.section`
    background: black`;

export const Column = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 50px; 
    margin-top: 50px;`;

export const Row = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: center;`;

export const Text = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

Footer Component

import React from 'react';
import { Column, Row, Background, Text } from './FooterStyles';

function Footer(props) {
    return (
        <div>
            <Background>
                <Row>
                    <Column>
                        <Text><h1>Developed By</h1></Text>
                        <h3>Erwin Smith</h3>
                        <h3>Peter Jackson</h3>
                        <h3>Tommy</h3>
                    </Column>
                    <Column>
                        <h1>About US</h1>
                    </Column>
                </Row>
            </Background>
        </div>
    )
}

export default Footer;    

A solution to work around this issue is much appreciated.

Answer 1

If you r using bootstrap try creating a custom class with margin-left,right -15px n overflow-x: hidden to body

Answer 2

The defaults properties and values for a body tag are:

body { display : block; margin : 8px; }

so I think you should set that margin to 0.

this is just my guess because you haven't provided so much information and this is all I can say.