<!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;
}
I am also looking for a solution to this problem!