Chakra UI is applying unwanted padding to my container element

Question

I am using Chakra to style a form. However, there is automatic padding that is applied to the ChakraProvider and it affects how I want it to be placed in the viewport. Below is my form component. I tried to override the classes that Chakra applies to the ChakraProvider and that didn't work. Thanks for the help.

export default function Form() {

  return (
    <ChakraProvider>
      <Container className='flex flex-col items-center'>
        {error && (
          <Text color='red.300' my={4} fontSize='3xl'>
            {error}
          </Text>
        )}
        <FormControl
          isRequired
          isInvalid={touched.name && !values.name}
          mb={5}
          w={400}
        >
          <FormLabel fontSize='2xl' fontFamily='Open Sans' fontWeight='500'>
            Name
          </FormLabel>
          <Input
            type='text'
            name='name'
            borderColor='#33272a'
            h={12}
            errorBorderColor='red.300'
            value={values.name}
            onChange={handleChange}
            onBlur={onBlur}
          />
          <FormErrorMessage>Required</FormErrorMessage>
        </FormControl>
      </Container>
    </ChakraProvider>
  )
}