Input field wont stay inside container

<!doctype html>

    <meta charset="UTF-8">
    <title>Form Survey (Flexbox)</title>

    <!-- Custom CSS -->
    <link href="styles/styles.css" type="text/css" rel="stylesheet">
    <!-- Normalize CSS -->
    <link href="styles/normalize.css" type="text/css" rel="stylesheet">

                        <!-- Project Tracker (START)-->
            <script src=""></script>
<h1 id="title">Survey Form</h1>
                        <!-- Project Tracker (END)-->

    <div class="container">
        <form id="survey-form">
         <div class="p-description">
        <p id="description">Let us know how we can improve freeCodeCamp</p>
        <div class="row">
            <div class="leftName">
                <label for="name-label">* Next</label>
            <div class="rightName">
                <input type="text" id="name" placeholder="Enter your name" required>
                        <!-- Bootstrap Scripts -->
    <script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>


    background-color: lightblue;

h1, #title {
    text-align: center;

.container #survey-form{
    text-align: center;
    background-color: white;
    width: 50%;
    margin: 0 auto;

    display: flex;
    border: 1px solid blue;
    width: ;
    height: 10em;
    margin: 0 auto;

.leftName {
	border:  1px solid orange;
    width: 50%;
    background-color: white;
    text-align: right;
    padding-right: 1em;

.rightName {
    position: relative;
	border: 1px solid orange;
    width: 50%;
    background-color: white;
    text-align: left;
    overflow: hidden;

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


In general, when you want to post this much code, it would be better to just post a link to your code (github, Codepen, JSFiddle, etc…).

I am also looking for a solution to this problem!