Text area element not aligning properly with other inputs

[quang-pham-1109]

So for some reason my <Input/> and <Textarea/> is not aligning properly to the left of the screen, here is the code:

    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="flex justify-center items-center flex-col gap-5 mt-10">
        <FormField
          control={form.control}
          name="fullName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Full Name</FormLabel>
              <FormControl>
                <Input 
                  type="string" 
                  placeholder="Your full name" 
                  {...field} 
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="location"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Location</FormLabel>
              <FormControl>
                <Input 
                  type="string" 
                  placeholder="Your location" 
                  {...field} 
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="summary"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Professional Summary</FormLabel>
              <FormControl>
                <Textarea 
                  placeholder="Write a short summary about your career" 
                  {...field} 
                />
              </FormControl>
            </FormItem>
          )}
        />
        <Button type="submit">Continue</Button>
      </form>
    </Form>

Any help is appreciated!

[pablotanner]

I'm not sure what the problem is, its all aligned correctly for me? Could you show an example of the expected behaviour or what it currently looks like for you?