Input field wont stay inside container

Input field wont stay inside container
0

#1
<!doctype html>
<html>

<head>
    <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">
 
</head>

<body>                          
                        <!-- Project Tracker (START)-->
            <script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></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>
       
        <div class="row">
            <div class="leftName">
                <label for="name-label">* Next</label>
            </div>
            
            <div class="rightName">
                <input type="text" id="name" placeholder="Enter your name" required>
            </div>
        </div>
    
        </form>
    </div>
                        <!-- Bootstrap Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

</body>

</html>
html,body,h1{
    background-color: lightblue;
}

h1, #title {
    text-align: center;
}

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

.row{
    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;
}

#2

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…).


#3

I am also looking for a solution to this problem!