I have posted a question, but unfortunately, no one has answered it yet. Here is my code snippet:
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
font-family: 'Cabin', sans-serif;
background-color: #333;
}
.firstnav {
margin:auto;
height: 1500px;
display: block;
width: 70%;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#third {
background: #f00;
position:relative;
display:inline-block;
width: 30%;
margin-left:auto;
margin-right:auto;
height: 500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
#second {
background: #fff;
position:relative;
display:inline-block;
margin-left:auto;
margin-right:auto;
width: 67%;
height: 1500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
#registration-form {
font-family:'Open Sans Condensed', sans-serif;
width: 100%;
margin: 20px auto;
position: relative;
display:block;
position:absolute;
}
#registration-form .fieldset {
background-color:#d5d5d5;
border-radius: 3px;
}
#registration-form legend {
text-align: center;
background: #364351;
width: 100%;
padding: 30px 0;
border-radius: 3px 3px 0 0;
color: white;
font-size:2em;
}
.fieldset form{
border:1px solid #2f2f2f;
margin:0 auto;
display:block;
width:100%;
padding:30px 20px;
box-sizing:border-box;
border-radius:0 0 3px 3px;
}<div class="firstnav">
<div id="second"><p>second<p></div>
<div id="third">
<div id="registration-form">
<div class='fieldset'>
<legend>Todays news
</legend>
<form action="#" method="post" data-validate="parsley">
</form>
</div>
</div>
</div>It seems that the content in the second container is aligning incorrectly. Despite making changes to the "#second" code, the containers are still not side by side as intended. Can someone help me figure out why this is happening?