Having an issue with the "formbox" class that is causing unexpected behavior when applied to a form. When removed, everything works as expected. I've tried narrowing down the issue by removing each CSS rule individually and testing it out but haven't been able to isolate the problem. Any suggestions? Sorry if this is a beginner question, still getting familiar with front-end development.
body{
margin:0;
padding:0;
}
a{color:#fff;}
.formbox{
width:100%;
}
.formbox p{
margin:0;
padding:1px;
font-weight:bold;
}
.formbox input{
margin-bottom: 20px;
}
.formbox input[type="email"],
.formbox input[type="text"],
.formbox input[type="password"]
{
background-color : #161925;
border:none;
border-bottom: 2px solid #F1D302;
height:40px;
}
.formbox input[type="email"]:focus,
.formbox input[type="text"]:focus,
.formbox input[type="password"]:focus
{
border-bottom: 2px solid #FDFFFC;
}
textarea, input, button { outline: none; }
.nav>li>a:hover,
.nav>li>a:focus
{
color:#161925;
background-color : #F1D302 ;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no>
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css>
<linl href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet>
<link href="/css/mastercss.css" rel="stylesheet>
<link href="/css/newuser.css" rel="stylesheet>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous>
</head>
<body>
<!--This is where the logo is-->
<div class="container-fluid>
<div class="row h-100 justify-content-center>
<a name="redirectHome" onClick="redirectHome()"><img src="#" class="img-fluid" width="200" height="400" alt="Responsive image">
</a>
</div>
<div class="row h-100 justify-content-center> <h4>Type of User</h4></div>
<div class="row h-100 justify-content-center>
<ul class="nav nav-pills mb-3 red" id="pills-tab" role="tablist>
<li class="nav-item>
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true>Student</a>
&uot;li class="nav-item>
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false>Teacher</a>
<li class="nav-item>
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false>Corporation</a>
</li>
</ul>
</div>
<div class="row h-100 justify-content-center>
<div class="tab-content" id="pills-tabContent>
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab>
<!--Start of first tab-->
<div class="formbox>
<form class="submission-form>
<p>Name</p>
<input type="text" id="first-name" placeholder="Kylo Ren>
<p>Email</p>
<input type="email" id="email" placeholder="<ahref="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf-email="c0abaea9a7a8b4b3afa692a5ae80a4a1b2abeea3afad">[email protected]</a>
<p>Password</p>
<input type="password" id="password" name="password" placeholder="●●●●●●●●●●>
<p>Confirm Password</p>
<input type="password" id="cpassword" name="cpassword" placeholder="●●●●●●●●●●>
...