I am currently engrossed in my informatics project, which involves building a sample dating site. However, I have encountered some difficulties in getting everything to align correctly. Everything was working fine until my email box appeared in the wrong place (although Dreamweaver displays it as intended). I suspect that the issue may have something to do with my margins or padding. Any assistance would be highly appreciated!
Thank you in advance,
HTML+CSS (many words are Dutch and I am a beginner in this field, so please bear with me if the code is not top-notch. In my actual project, I have separated my HTML and CSS into different files):
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
border:0;
}
body {
background-color:#666;
font-family:corbel;
}
.container {
width: 1240px;
}
#HomeLeftSideRegister {
float:left;
}
.Form {
width: 1240px;
height: 600px;
display:block;
background-color:white;
border-radius: 10px;
margin-top: 111px;
margin-left:auto;
margin-right:auto;
}
#Registreernu {
margin-left:45px;
color: #3c948b;
font-size: 70px;
}
#Home-email {
color: #000;
font-size: 30px;
margin-top: 30px;
margin-left: 245px;
}
.Email {
color:#666;
font-weight:bold;
}
#useremail {
height: 22px;
width: 281px;
font-size: 20px;
border-width: 1px;
border-style:solid;
margin: 10px 0px 10px 149px;
}
.Gender {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
margin-left: 25px;
margin-top: 10px;
}
#gender-1 {
margin-left:150px;
}
.Radiolabel {
margin-top: 20px;
}
.Roundbutton {
background-color: #3c948b;
height: 74px;
width: 196px;
border-radius: 10px;
color: white;
font-size: 25px;
font-weight: 500;
float:none;
margin-left:193px;
}
#input {
margin-top: 220px;
}
#BlouseManImage {
float:right;
margin: 44px 70px auto auto;
}
</style>
</head>
<body>
<div id="Content" class="Container">
<section id="Home-Register">
<form class="Form" action="#" >
<div id="HomeLeftSideRegister">
<div id="Registreernu">REGISTREER NU</div>
<h2 id="Home-email">EMAIL:</h2>
<input name="email" type="email" class="Email" id="useremail"/>
<fieldset class="Gender" id="gender-1">
<H3>IK BEN EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="amman" class="styled-radio" value="Man"/>
Man
</label> <br />
<label>
<input type="radio" name="amvrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
</div>
</fieldset>
<fieldset class="Gender">
<H3 class="">IK ZOEK EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="likeman" class="styled-radio" value="Man"/>
Man
</label>
<br />
<label>
<input type="radio" name="likevrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
<br />
<label>
<input type="radio" name="likebeide" class="styled-radio" value="Beide"/>
Beide
</label>
</div>
</fieldset>
<div id="input">
<input type="submit" value="GA VERDER" class="Roundbutton">
</div>
</div>
<div id="BlouseManImage"><img src="Images/Man_Registreer.jpg" alt="Ik probeer het gewoon" height="535" width="577" />
</div>
</form>
</section>
<section id="reclame">
</section>
</div>
</body>
</html>