Css Order does not position correctly

Css Order does not position correctly - html

I am trying to create a div with two div inside. On the left 70% and on the right 30% in one row at laptop. But at phone size, I want the div no 2 to be on top of div no 1. I have applied the css order property but it seems like not working.
/* main container */
#resume {
padding: 1rem;
margin-top: 2rem;
background-color: silver
}
/* every section wrapper */
.section {
margin-bottom: 1rem;
}
section .location {
margin-right: .5em;
color: #606d76;
font-weight: 700;
}
#contact {
margin-top: .5rem;
}
#profiles .item {
padding: 0;
}
#header>#profiles,
#header>#contact,
#skills,
#languages,
#interests {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
#header>div {
line-height: 1.5;
}
#header>div>div {
margin-right: 1.2em;
}
#header h1.name {
font-size: 2.8rem;
font-weight: 100;
line-height: 100%;
}
#header h2.label {
color: #202931;
font-size: 1.47rem;
font-weight: 300;
}
#header .picture {
width: 11em;
float: right;
border-radius: 4px;
}
.main-summary {
background: #f1f8ff;
padding: 1.2em 1em;
margin-top: 1rem;
}
.main-summary p {
margin: .15em 0 0;
}
h2.section-title {
display: inline-block;
background: #fff;
padding: 0 1em 0.3em 0;
color: #ff6d1f;
text-transform: uppercase;
font-weight: 600;
border: none;
font-size: .9rem;
}
.section>header {
position: relative;
}
.fa {
margin-right: 0.25em;
}
.section>header::after {
position: absolute;
left: 0;
top: .7em;
height: 1px;
background: #ccc;
content: "";
width: 100%;
z-index: -100;
display: block;
}
.section.main-summary>section {
margin: 0;
}
.section>section>header {
font-size: 1.38rem;
position: relative;
margin-top: .7em;
}
.section>section>header:first-of-type {
margin: 0;
}
.section>section>header .space-left {
position: absolute;
left: -1.56rem;
top: 5px;
color: #aaa;
line-height: 1;
opacity: 0;
}
.section header .date {
font-size: 1rem;
display: inline-table;
padding: .1em 0;
font-weight: 600;
}
/****************
* PHONE
****************/
#media screen and (min-width: 460px) {
#resume {
width: 95%;
margin: 0px auto;
}
.display {
max-width: 180px;
}
.child {
flex: 100%;
}
.topper {
order: 0;
}
}
/****************
* LAPTOP
****************/
#media screen and (min-width: 1025px) {
li {
margin-left: 1.5em;
}
#resume {
width: 820px;
margin: 2rem auto;
}
.section>section>header .space-left {
opacity: 1;
cursor: pointer;
}
.section>section {
margin-left: 1.67rem;
}
.toggle-item {
transform: translate(-9999px);
}
.toggle-item+label {
display: block;
margin-top: -16px;
}
.toggle-item:checked+label:after {
content: '\f0d7';
}
.toggle-item+label:after {
float: left;
cursor: pointer;
margin-left: -20px;
color: #aaa;
font-size: 16px;
content: '\f0da';
font-family: Fontawesome;
}
.toggle-item~.item {
height: 0;
opacity: 0;
}
.toggle-item:checked~.item {
height: auto;
opacity: 1;
transition: all .5s linear;
}
.company::before,
.institution::before,
.organization::before,
.awarder::before {
content: "| ";
}
.header-left {
float: left;
width: 70%;
word-break: normal;
}
.section header .date {
float: right;
padding: .2em;
}
.display {
display: none;
}
.display:not(.none) {
display: block;
}
.parent {
width: 100%;
display: flex;
}
.child {
flex: 0 30%;
text-align: center;
border: 1px solid red;
order: 1;
}
.wider {
flex: 0 70%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>Steve</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="resume">
<div class="parent">
<div class="child wider">
1
</div>
<div class="child topper">
2
</div>
</div>
<header class="clear" id="header">
<div>
<h1 class="name">Steve</h1>
<h2 class="label">Programmer</h2>
</div><span class="location"><span class="address">2712 Broadway St,</span> <span class="postalCode">CA 94115,</span> <span class="city">San Francisco,</span> <span class="region">California</span> <span class="countryCode">US</span></span>
<div id="contact">
<div class="website">
<span class="fa fa-external-link"></span> http://richardhendricks.com
</div>
<div class="email">
<span class="fa fa-envelope-o"></span> richard#valley.com
</div>
<div class="phone">
<span class="fa fa-mobile"></span> (912) 555-4321
</div>
</div>
<div id="profiles">
<div class="item">
<div class="username">
<span class="fa fa-twitter twitter social"></span> <span>neutralthoughts</span>
</div>
</div>
<div class="item">
<div class="username">
<span class="fa fa-soundcloud soundcloud social"></span> <span class="url">dandymusicnl</span>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
The reason I am doing these two divs so that later I can put a photo in div no 2.

The issue is that you are only making the .parent class a flexbox on a larger screen. You need to make it a flexbox on all sizes. You also need to set the order to -1 so that .topper will be pulled up.
/* main container */
#resume {
padding: 1rem;
margin-top: 2rem;
background-color: silver
}
/* every section wrapper */
.section {
margin-bottom: 1rem;
}
section .location {
margin-right: .5em;
color: #606d76;
font-weight: 700;
}
#contact {
margin-top: .5rem;
}
#profiles .item {
padding: 0;
}
#header>#profiles,
#header>#contact,
#skills,
#languages,
#interests {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
#header>div {
line-height: 1.5;
}
#header>div>div {
margin-right: 1.2em;
}
#header h1.name {
font-size: 2.8rem;
font-weight: 100;
line-height: 100%;
}
#header h2.label {
color: #202931;
font-size: 1.47rem;
font-weight: 300;
}
#header .picture {
width: 11em;
float: right;
border-radius: 4px;
}
.main-summary {
background: #f1f8ff;
padding: 1.2em 1em;
margin-top: 1rem;
}
.main-summary p {
margin: .15em 0 0;
}
h2.section-title {
display: inline-block;
background: #fff;
padding: 0 1em 0.3em 0;
color: #ff6d1f;
text-transform: uppercase;
font-weight: 600;
border: none;
font-size: .9rem;
}
.section>header {
position: relative;
}
.fa {
margin-right: 0.25em;
}
.section>header::after {
position: absolute;
left: 0;
top: .7em;
height: 1px;
background: #ccc;
content: "";
width: 100%;
z-index: -100;
display: block;
}
.section.main-summary>section {
margin: 0;
}
.section>section>header {
font-size: 1.38rem;
position: relative;
margin-top: .7em;
}
.section>section>header:first-of-type {
margin: 0;
}
.section>section>header .space-left {
position: absolute;
left: -1.56rem;
top: 5px;
color: #aaa;
line-height: 1;
opacity: 0;
}
.section header .date {
font-size: 1rem;
display: inline-table;
padding: .1em 0;
font-weight: 600;
}
.parent {
display: flex;
flex-flow: column nowrap;
}
/****************
* PHONE
****************/
#media screen and (min-width: 460px) {
#resume {
width: 95%;
margin: 0px auto;
}
.display {
max-width: 180px;
}
.child {
flex: 100%;
}
.topper {
order: -1;
}
}
/****************
* LAPTOP
****************/
#media screen and (min-width: 1025px) {
li {
margin-left: 1.5em;
}
#resume {
width: 820px;
margin: 2rem auto;
}
.section>section>header .space-left {
opacity: 1;
cursor: pointer;
}
.section>section {
margin-left: 1.67rem;
}
.toggle-item {
transform: translate(-9999px);
}
.toggle-item+label {
display: block;
margin-top: -16px;
}
.toggle-item:checked+label:after {
content: '\f0d7';
}
.toggle-item+label:after {
float: left;
cursor: pointer;
margin-left: -20px;
color: #aaa;
font-size: 16px;
content: '\f0da';
font-family: Fontawesome;
}
.toggle-item~.item {
height: 0;
opacity: 0;
}
.toggle-item:checked~.item {
height: auto;
opacity: 1;
transition: all .5s linear;
}
.company::before,
.institution::before,
.organization::before,
.awarder::before {
content: "| ";
}
.header-left {
float: left;
width: 70%;
word-break: normal;
}
.section header .date {
float: right;
padding: .2em;
}
.display {
display: none;
}
.display:not(.none) {
display: block;
}
.parent {
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.child {
flex: 0 30%;
text-align: center;
border: 1px solid red;
order: 1;
}
.wider {
flex: 0 70%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>Steve</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="resume">
<div class="parent">
<div class="child wider">
1
</div>
<div class="child topper">
2
</div>
</div>
<header class="clear" id="header">
<div>
<h1 class="name">Steve</h1>
<h2 class="label">Programmer</h2>
</div><span class="location"><span class="address">2712 Broadway St,</span> <span class="postalCode">CA 94115,</span> <span class="city">San Francisco,</span> <span class="region">California</span> <span class="countryCode">US</span></span>
<div id="contact">
<div class="website">
<span class="fa fa-external-link"></span> http://richardhendricks.com
</div>
<div class="email">
<span class="fa fa-envelope-o"></span> richard#valley.com
</div>
<div class="phone">
<span class="fa fa-mobile"></span> (912) 555-4321
</div>
</div>
<div id="profiles">
<div class="item">
<div class="username">
<span class="fa fa-twitter twitter social"></span> <span>neutralthoughts</span>
</div>
</div>
<div class="item">
<div class="username">
<span class="fa fa-soundcloud soundcloud social"></span> <span class="url">dandymusicnl</span>
</div>
</div>
</div>
</header>
</div>
</body>
</html>

Related

My HTML and CSS nav bar is not working on IPhones

So I have been coding a website with some friends for our robotics team and have run into a problem with our nav bar. It works well for any PC/laptop/mac books and Android devicesWorking nav bar on Android phone but on all iPhones the nav bar is stretched Screen shot of the stretched nav bar. Here is the CSS and HTML code that we have `
body {
background-color: rgb(90, 88, 88);
margin: 0;
padding: 0;
user-select: none;
}
#img {
width: 5.6%;
height: 100%;
}
#topBar {
position: fixed;
list-style-type: none;
width: 100%;
height: 10%;
display: inline-block;
overflow: hidden;
background-color: #333;
z-index: 999;
}
.topbar-section {
color: white;
text-align: center;
padding: 1.5rem .5rem;
display: inline-block;
font-family: "Helvetica ", sans-serif;
font-weight: 100;
width: 10vw;
height: 100%;
}
#h {
color: rgb(253, 253, 253);
font-family: "Helvetica ", sans-serif;
text-decoration: none;
font-weight: 100;
font-size: 100%;
}
#heo {
display: inline-block;
text-align: center;
padding: 1.6rem 0.6%;
}
.tabs {
font-size: 100%;
font-weight: 100;
}
.topbar-section:hover {
background-color: #111;
}
.Toggle {
position: absolute;
top: 2.1rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.Toggle .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#con {
margin-right: 10px;
float: right;
margin: 0;
padding: 0;
}
.active {
display: block;
}
#media(max-width: 1050px) {
.Toggle {
position: absolute;
top: 4vh;
right: 1rem;
}
.Toggle {
display: flex;
}
#img {
width: 8%;
}
#topbar {
height: auto;
}
.topbar-section {
display: block;
}
.topbar-section {
width: 100%;
padding: .7rem;
}
#con {
text-align: center;
width: 100%;
margin-right: 0;
}
.active {
display: none;
}
.HomeTexpandlogo {
display: block;
width: 10%;
height: 10%;
}
#h {
font-size: 80%;
}
}
#media(max-width: 450px) {
#h {
font-size: 60%;
}
}
<div id="topBar">
<img id="img" src="images/txpand_logo-removebg-preview.png">
<div id="heo">
<h1 id="h">Expanding STEM skills through robotics</h1>
</div>
<a href="#" class="Toggle" id="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div id="con" class="active">
<div class="topbar-section" id="homeTab">
<span class="tabs">Home</span>
</div>
<div class="topbar-section" id="aboutUsTab">
<span class="tabs">About us</span>
</div>
<div class="topbar-section" id="outreachTab">
<span class="tabs">Outreach</span>
</div>
<div class="topbar-section" id="pastRobotsTab">
<span class="tabs">Past Robots</span>
</div>
<div class="topbar-section" id="sponsorshipsTab">
<span class="tabs">Sponsorships</span>
</div>
<div class="topbar-section" id="donationsTab" style="display:none;">
<span class="tabs">Donations</span>
</div>
</div>
</div>
Has anyone else run in to this problem and know how to fix it?
Thanks for the help in advance.

What in my CSS is making my header/nav bar display incorrectly?

Still learning code. I am building a contact page and wanted to include my header bar at the top of the page, but when I added the code for this my header bar appears to the left of my page all wacky. I know this is most likely a CSS error, but I can't seem to pinpoint why my header bar wouldn't display at the top of my page. Anyone willing to take a look? Here's my code.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}

Your <header> (as opposed to <head>) has to be inside the <body> tag (which contains everything that is visible on the page)!

As a start, IMO, <body> should not be styled as flex, at least not when using <header> which brings its own defaults which were being overridden.
Moving the flex styles from body to .container will fix your immediate request, but probably introduce other styling concerns.
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before {
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details {
margin: 14px;
text-align: center;
}
.content .left-side .details i {
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic {
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two {
font-size: 14px;
color: #afafb6;
}
.container .content .right-side {
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text {
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box {
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea {
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box {
min-height: 110px;
}
.right-side .input-box textarea {
padding-top: 6px;
}
.right-side .button {
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"] {
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover {
background: #bc0456;
}
#media (max-width: 950px) {
.container {
width: 90%;
padding: 30px 40px 40px 35px;
}
.container .content .right-side {
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container {
margin: 40px 0;
height: 100%;
}
.container .content {
flex-direction: column-reverse;
}
.container .content .left-side {
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before {
display: none;
}
.container .content .right-side {
width: 100%;
margin-left: 0;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

The problem occurs from the body. You assign to flex. I removed it and create a new div which wrappend the container. If you want reduce the width in the navbar you have to wrapped to another div and center it.
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</header>
<div class="wrapper">
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Site works fine in Brave and Microsoft Edge (chromium based) but has problem in Firefox

The site works totally fine, but the responsiveness has some problems in firefox. Instead of shrinks and adapt to the window size, some sections get hidden instead of show themselves.
HTML and CSS is the same, it's a very simple site, so I don't know why on FF I have these problems.
Code below:
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<link rel="stylesheet" href="style.css">
<link
href="https://fonts.googleapis.com/css2?family=Domine:wght#400;700&family=Lora:ital,wght#0,400;0,600;0,700;1,400;1,500&family=Montserrat:wght#300;400;700&display=swap"
rel="stylesheet">
<link rel="icon" href="images/alebacce.ico">
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" />
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 481px) and (max-width: 960px)" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Bacce's Angle</title>
</head>
<body>
<nav>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Chi sono
Skills
Interessi
<span class="contactmenu">Contattami</span>
</div>
</nav>
<div class="main">
<picture>
<source
media="(min-width: 650px)"
srcset="images/webdevlr2.png">
<source
media="(max-width: 465px)"
srcset="images/webdevlr2mobile.png">
<img src="images/webdevlr2.png"
alt="Welcome on my site!">
</picture>
<div class="welcome">
<p>
<h1><strong>ALESSANDRO BACCELLI</h1></strong>
</p>
<p><em>Work in progress</em> WEB DEVELOPER</p>
</div>
</div>
<div class="divide first">
<div class="heading">
<h1 id="chisono">Chi sono</h1>
</div>
<div class="section1">
<div class="profile">
<img src="images/profiledefmobile.png" alt="A picture of me">
</div>
<div class="biography">
<p>Un ragazzo genovese di 24 anni, laureato in <em>Scienze della Comunicazione</em> da sempre appassionato di
tecnologia e digitale. <br><br> Ho recentemente scoperto
la mia passione per la programmazione grazie ai corsi di <strong>start2impact</strong>,
iniziando il mio viaggio nel mondo di Html, CSS e via discorrendo... <br><br>
Per quanto la strada sia ancora lunga ho fiducia nel futuro, questo sito vuole infatti essere l'inizio di un
lungo percorso.</p>
<div class="download">
<button>Scarica il mio CV</button>
</div>
</div>
</div>
</div>
<div class="divide colordifferent">
<div class="heading margin">
<h1 id="skills">Skills</h1>
</div>
<div class="section2">
<div class="hard">
<h2>Hard skills</h2>
<ul>
<li>Inglese fluente</li>
<li class="modifiedli">HTML</li>
<li class="modifiedli">CSS</li>
<li>Canva</li>
</ul>
</div>
<div class="soft">
<h2>Soft skills</h2>
<ul>
<li>Autonomia</li>
<li>Fast learner</li>
<li>Empatia</li>
<li>Ascolto attivo</li>
</ul>
</div>
</div>
</div>
<div class="divide">
<div class="heading bottomodif">
<h1 id="interessi">Interessi</h1>
</div>
<div class="section2">
<div class="inte hard">
<ul>
<li id="programmazione">Coding</li>
<li id="foto">Fotografia digitale</li>
<li id="grafica">Grafica</li>
<li id="discover">Scoprire nuove cose</li>
<li id="cucina">Cucina</li>
<li id="videogiochi">Video-games</li>
</ul>
</div>
<div class="ressi soft">
<ul>
<li id="self">Self-growth</li>
<li id="mind">Mindfulness</li>
<li id="fit">Fitntess & Health</li>
<li id="storia"><span class="history">Storia e Antropologia</span></li>
<li id="book">Lettura</li>
<li id="eco">Ambiente</li>
</ul>
</div>
</div>
</div>
<footer id="chiamami">
<div class="foot"></div>
<div class="foot contact">E-mail<span class="not"><br></span><span class="bracket"> | </span>Linkedin<span class="not"><br></span><span class="bracket"> | </span>Start2impact<br>
<br> ALESSANDRO BACCELLI 2020 ©</div>
<div class="foot"></div>
</footer>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
background-color: #E5DDC8;
color: #1F1F1F;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #EBFDFF;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #B1C5E7;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #7699D4;
}
h1,
h2 {
font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
color: #141414;
}
nav {
text-align: right;
font-size: 120%;
height: 100px;
line-height: 100px;
z-index: 99999;
position: relative;
background-color: #004369;
}
.menu {
margin: 0 30px 0 0;
z-index: 10;
background-color: #004369;
}
.menu a {
clear: right;
text-decoration: none;
color: white;
margin: 0 10px;
line-height: 100px;
z-index: 10;
}
.menu a:hover {
text-decoration: underline;
}
.contactmenu {
color: #7EDD9A;
z-index: 10;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 100px;
display: none;
width: 26px;
float: right;
z-index: 10;
color: white;
}
#toggle {
display: none;
}
#media only screen and (max-width: 600px) {
label {
display: block;
cursor: pointer;
z-index: 10;
}
.menu {
text-align: center;
width: 100%;
display: none;
z-index: 9999;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
z-index: 10;
}
.menu a:hover {
text-decoration: none;
}
#toggle:checked+.menu {
display: block;
}
}
.main {
display: block;
z-index: -1;
position: relative;
}
.welcome {
display: none;
color: #FFFFFF;
font-size: 3em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-shadow: 2px 2px 2px #1F1F1F;
}
.welcome h1 {
white-space: nowrap;
color: #ffffff;
}
.main img {
width: 100%;
position: relative;
}
.divide {
height: 900px;
margin-top: 120px;
}
.heading {
font-family: "Montserrat",
"Helvetica",
"Arial",
sans-serif;
color: #141414;
font-size: 200%;
margin-bottom: 80px;
text-align: center;
word-wrap: break-word;
}
.first {
height: fit-content;
}
.section1 {
display: flex;
justify-content: center;
width: 958px;
margin: 0 auto;
}
.profile {
text-align: center;
}
.biography {
align-self: center;
font-size: 140%;
margin-left: 80px;
}
.biography a {
color: #01949A;
text-decoration: none;
}
.biography a:hover {
color: #004369;
text-decoration: underline;
}
.download {
display: flex;
justify-content: center;
margin: 0 auto;
}
.biography button {
font-size: 130%;
padding: 15px;
background-color: #01949A;
border-radius: 10px;
border: none;
margin-top: 40px;
}
.biography button a {
color: #ffffff;
text-decoration: none;
}
.biography button a:hover {
color: #ffffff;
text-decoration: none;
background-color: #004369;
}
.biography button:hover {
background-color: #004369;
}
.section2 {
display: flex;
margin: 0 auto;
justify-content: space-evenly;
font-size: 200%;
}
.colordifferent {
background-color: #E5F9E0;
padding-top: 120px;
}
.margin {
margin-bottom: 145px;
}
.hard h2,
.soft h2 {
margin-bottom: 25px;
}
.section2 ul {
list-style-type: none;
margin-bottom: 140px;
}
.section2 li {
margin-bottom: 25px;
;
}
.section2 ul li::before {
content: "\2705";
margin-right: 25px;
}
.section2 ul .modifiedli::before {
content: "🚧";
}
.section2 ul #programmazione::before {
content: "👨🏻‍💻";
}
.section2 ul #foto::before {
content: "📸";
}
.section2 ul #grafica::before {
content: "🎨";
}
.section2 ul #discover::before {
content: "🗺️";
}
.section2 ul #cucina::before {
content: "👨🏻‍🍳";
}
.section2 ul #videogiochi::before {
content: "🎮";
}
.section2 ul #self::before {
content: "📈";
}
.section2 ul #mind::before {
content: "🧘🏻‍♂️";
}
.section2 ul #fit::before {
content: "🏋🏻";
}
.section2 ul #storia::before {
content: "🏺";
}
.section2 ul #book::before {
content: "📖";
}
.section2 ul #eco::before {
content: "♻️";
}
.bottomodif {
margin-bottom: 110px;
}
footer {
display: flex;
text-align: center;
align-items: center;
height: 350px;
background-color: #004369;
color: #FFFFFF;
font-size: 130%;
}
.foot {
width: 33.33333%;
}
footer a {
color: #FFFFFF;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
.not {
display: none;
}
CSS Tablet
body {
width: 100%;
}
.divide,
.section1 {
width: 100%;
}
.first {
height: fit-content;
flex-direction: column;
}
.section1 {
width: 90%;
display: block;
}
.profile {
margin-bottom: 70px;
}
.profile img {
max-width: 100%;
height: auto;
}
.biography {
margin: 0 auto;
width: 90%;
}
.biography button {
margin-top: 70px;
}
.bracket {
display: none;
}
.not {
display: unset;
}
CSS Mobile
body {
display: flex;
flex-direction: column;
font-size: 90%;
width: 100%;
}
.main {
display: block;
}
.main img {
display: block;
min-height: 100%;
min-width: 100%;
position: static;
}
.welcome {
display: none;
}
.divide {
height: fit-content;
width: 100%;
}
.section1,
.section2 {
display: block;
width: 100%;
height: initial;
overflow-y: auto;
}
.profile img {
height: auto;
max-width: 100%;
margin-bottom: 20px;
}
.biography {
display: block;
width: 90%;
text-align: left;
margin-left: 5px;
margin: 0 auto;
}
.hard,
.soft {
text-align: center;
margin-bottom: 80px;
}
.hard h2,
.soft h2 {
margin-bottom: 50px;
}
.hard ul,
.soft ul {
text-align: left;
width: 70%;
margin: auto;
word-wrap: break-word;
}
.hard ul li,
.soft ul li {
padding-left: 65px;
text-indent: -65px;
}
.inte,
.ressi {
margin-bottom: 0;
}
.ressi ul {
margin-bottom: 150px;
}
.history {
padding-left: 10px;
}
.bracket {
display: none;
}
.not {
display: unset;
}

not able to align in same row

I was not able to align in same horizontal line both the content. I was using flex. How to align both the navigation menu and another flex content?
const navButton = document.querySelector('button[aria-expanded]');
function toggleNav({
target
}) {
const expanded = target.getAttribute('aria-expanded') === 'true' || false;
navButton.setAttribute('aria-expanded', !expanded);
}
navButton.addEventListener('click', toggleNav);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.wrap {
width: 100%;
margin: 0 auto;
}
[aria-controls="menu-list"] {
display: none;
}
.menu ul {
list-style: none;
display: flex;
justify-content: space-between;
width: 90%;
margin: 20px auto;
}
.menu ul li {
flex-grow: 1;
flex-basis: 1px;
padding: 10px;
}
.menu ul li a {
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
font-weight: 700;
background: #ffc600;
padding: 10px;
color: black;
}
.main {
width: 100%;
}
.cat1 {
margin-right: 20px;
flex: 6;
background: url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
height: 400px;
z-index: -1;
}
.c1title {
z-index: 1;
color: black;
background: #ffc600;
position: absolute;
top: 130px;
left: 130px;
font-size: 30px;
padding: 5px;
font-weight: 600;
}
.c1para {
z-index: 1;
color: black;
background: #ffc600;
position: absolute;
top: 250px;
left: 130px;
font-size: 16px;
padding: 5px;
font-weight: 600;
}
.cat {
flex: 2;
display: flex;
flex-direction: column;
margin-right: 20px;
}
.cat2 {
flex: 1;
background: #ffc600;
margin-bottom: 25px;
display: flex;
}
.c2title {
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
.small {
display: block;
font-size: 16px;
font-weight: 600;
}
.cat3 {
flex: 1;
background: #ffc600;
display: flex;
}
.c3title {
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
#media (min-width: 900px) {
.hero {
width: 90%;
display: flex;
margin: 0 auto;
}
}
#media (max-width: 1000px) {
.menu {
perspective: 800px;
}
[aria-controls="menu-list"] {
display: block;
margin-bottom: 10px;
}
.menu ul {
max-height: 0;
overflow: hidden;
transform: rotateX(90deg);
transition: all 0.5s;
}
[aria-expanded="true"]~ul {
display: grid;
max-height: 500px;
transform: rotateX(0);
}
[aria-expanded="false"] .close {
display: none;
}
[aria-expanded="true"] .close {
display: inline-block;
}
[aria-expanded="true"] .open {
display: none;
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<div class="wrap">
<nav class="menu">
<button aria-expanded="false" aria-controls="menu-list">
<span class="open">☰</span>
<span class="close">×</span>
Menu
</button>
<ul id="menu-list">
<li>Tacos</li>
<li>Beers</li>
<li>Wines</li>
<li>Deserts</li>
<li>Reservations</li>
</ul>
</nav>
</div>
<div class="main">
<div class="hero">
<div class="cat1">
<h6 class="c1title">Terry's Taco Joint</h6>
<p class="c1para">Pretty Good Tacos!</p>
</div>
<div class="cat">
<div class="cat2">
<p class="c2title">1.99$<br><span class="small">
Tacos</span></p>
</div>
<div class="cat3">
<p class="c3title">3.99$
<br><span class="small">Kombucha</span></p>
</div>
</div>
</div>
</div>
Image what was trying to align:

You are setting display: grid to [aria-expanded="true"] ~ ul. Remove it and it will work fine.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.wrap{
width: 100%;
margin: 0 auto;
}
[aria-controls="menu-list"] {
display: none;
}
.menu ul{
list-style: none;
display: flex;
flex-flow: column no-wrap;
justify-content: space-between;
width: 90%;
margin: 20px auto;
}
.menu ul li{
flex-grow: 1;
flex-basis: 1px;
padding: 10px;
}
.menu ul li a{
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
font-weight: 700;
background: #ffc600;
padding: 10px;
color: black;
}
.main{
width: 100%;
}
.cat1{
margin-right: 20px;
flex: 6;
background: url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
height: 400px;
z-index: -1;
}
.c1title{
z-index: 1;
color:black;
background: #ffc600;
position: absolute;
top: 130px;
left: 130px;
font-size: 30px;
padding: 5px;
font-weight: 600;
}
.c1para{
z-index: 1;
color:black;
background: #ffc600;
position: absolute;
top: 250px;
left: 130px;
font-size: 16px;
padding: 5px;
font-weight: 600;
}
.cat{
flex: 2;
display: flex;
flex-direction: column;
margin-right: 20px;
}
.cat2{
flex: 1;
background: #ffc600;
margin-bottom: 25px;
display: flex;
}
.c2title{
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
.small{
display: block;
font-size: 16px;
font-weight: 600;
}
.cat3{
flex:1;
background: #ffc600;
display: flex;
}
.c3title{
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
#media (min-width: 900px){
.hero{
width: 90%;
display: flex;
margin: 0 auto;
}
}
#media (max-width: 1000px) {
.menu {
perspective: 800px;
}
[aria-controls="menu-list"] {
display: block;
margin-bottom: 10px;
}
.menu ul {
max-height: 0;
overflow: hidden;
transform: rotateX(90deg);
transition: all 0.5s;
}
[aria-expanded="true"] ~ ul {
max-height: 500px;
transform: rotateX(0);
}
[aria-expanded="false"] .close {
display: none;
}
[aria-expanded="true"] .close {
display: inline-block;
}
[aria-expanded="true"] .open {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title>Restaurant Wesbite</title>
</head>
<body>
<div class="wrap">
<nav class="menu">
<button aria-expanded="false" aria-controls="menu-list">
<span class="open">☰</span>
<span class="close">×</span>
Menu
</button>
<ul id="menu-list">
<li>Tacos</li>
<li>Beers</li>
<li>Wines</li>
<li>Deserts</li>
<li>Reservations</li>
</ul>
</nav>
</div>
<div class="main">
<div class="hero">
<div class="cat1">
<h6 class="c1title">Terry's Taco Joint</h6>
<p class="c1para">Pretty Good Tacos!</p>
</div>
<div class="cat">
<div class="cat2">
<p class="c2title">1.99$<br><span class="small">
Tacos</span></p>
</div>
<div class="cat3">
<p class="c3title">3.99$
<br><span class="small">Kombucha</span></p>
</div>
</div>
</div>
</div>
<script>
const navButton = document.querySelector('button[aria-expanded]');
function toggleNav({ target }) {
const expanded = target.getAttribute('aria-expanded') === 'true' || false;
navButton.setAttribute('aria-expanded', !expanded);
}
navButton.addEventListener('click', toggleNav);
</script>
</body>
</html>

I have added this tiny code snippet to achieve what your desired image conveyed. Basically CSS flexbox works in direct parent-children relationship and flex assigned to parent only works for direct children and not children of children elements.
.menu #menu-list{display: flex;}
const navButton = document.querySelector('button[aria-expanded]');
function toggleNav({
target
}) {
const expanded = target.getAttribute('aria-expanded') === 'true' || false;
navButton.setAttribute('aria-expanded', !expanded);
}
navButton.addEventListener('click', toggleNav);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.wrap {
width: 100%;
margin: 0 auto;
}
[aria-controls="menu-list"] {
display: none;
}
.menu ul {
list-style: none;
display: flex;
justify-content: space-between;
width: 90%;
margin: 20px auto;
}
.menu ul li {
flex-grow: 1;
flex-basis: 1px;
padding: 10px;
}
.menu ul li a {
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
font-weight: 700;
background: #ffc600;
padding: 10px;
color: black;
}
.menu #menu-list{
display: flex;}
.main {
width: 100%;
}
.cat1 {
margin-right: 20px;
flex: 6;
background: url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
height: 400px;
z-index: -1;
}
.c1title {
z-index: 1;
color: black;
background: #ffc600;
position: absolute;
top: 130px;
left: 130px;
font-size: 30px;
padding: 5px;
font-weight: 600;
}
.c1para {
z-index: 1;
color: black;
background: #ffc600;
position: absolute;
top: 250px;
left: 130px;
font-size: 16px;
padding: 5px;
font-weight: 600;
}
.cat {
flex: 2;
display: flex;
flex-direction: column;
margin-right: 20px;
}
.cat2 {
flex: 1;
background: #ffc600;
margin-bottom: 25px;
display: flex;
}
.c2title {
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
.small {
display: block;
font-size: 16px;
font-weight: 600;
}
.cat3 {
flex: 1;
background: #ffc600;
display: flex;
}
.c3title {
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
#media (min-width: 900px) {
.hero {
width: 90%;
display: flex;
margin: 0 auto;
}
}
#media (max-width: 1000px) {
.menu {
perspective: 800px;
}
[aria-controls="menu-list"] {
display: block;
margin-bottom: 10px;
}
.menu ul {
max-height: 0;
overflow: hidden;
transform: rotateX(90deg);
transition: all 0.5s;
}
[aria-expanded="true"]~ul {
display: grid;
max-height: 500px;
transform: rotateX(0);
}
[aria-expanded="false"] .close {
display: none;
}
[aria-expanded="true"] .close {
display: inline-block;
}
[aria-expanded="true"] .open {
display: none;
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<div class="wrap">
<nav class="menu">
<button aria-expanded="false" aria-controls="menu-list">
<span class="open">☰</span>
<span class="close">×</span>
Menu
</button>
<ul id="menu-list">
<li>Tacos</li>
<li>Beers</li>
<li>Wines</li>
<li>Deserts</li>
<li>Reservations</li>
</ul>
</nav>
</div>
<div class="main">
<div class="hero">
<div class="cat1">
<h6 class="c1title">Terry's Taco Joint</h6>
<p class="c1para">Pretty Good Tacos!</p>
</div>
<div class="cat">
<div class="cat2">
<p class="c2title">1.99$<br><span class="small">
Tacos</span></p>
</div>
<div class="cat3">
<p class="c3title">3.99$
<br><span class="small">Kombucha</span></p>
</div>
</div>
</div>
</div>

Why is the text being pushed up?

I'm writing code for a new website. But I'm trying to fix a problem with one part of the webpage. The problem happens with text.
Everything is fine other than this div -
"statementtext-text-form-pgmiddle".
The text always gets pushed up and then to the right. I need the text to be aligned in the center just like the rest of the webpage. The text is ok only when the size of the window is very small. I was digging into the CSS code and can't find out why it happens. I've tried playing with padding and margin but without any results.
I know I could give you only the part of the code with that element but as I don't know where the issue is I can't really clear it.
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'), url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'), url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'), url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background: url("images/background.jpg");
background-size: cover;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.image-background-cover-pgtop {
background-image: url("images/awpasiimov.jpeg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container-element-unified-pgtop .container-text-informationwebsite-pgtop {
position: relative;
padding-top: 10%;
padding-left: 10%;
padding-bottom: 1%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.container-element-unified-pgtop .container-text-informationlow-pgtop {
position: relative;
padding-left: 10%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: white;
}
.container-element-unified-pgtop .container-text-informationtime-pgtop {
position: relative;
padding-left: 10%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #82359C;
/* border-bottom: 6px solid #DCC98E;*/
padding-bottom: 1%;
}
.container-line-form-pgtop {
background: #82359C;
height: 6px;
border: none;
width: 45%;
margin-left: 10%;
position: relative;
}
.container-element-unified-pgtop-2 {
padding-top: 1%;
}
.container-element-unified-pgtop-2 .container-text-informationhow-pgtop a {
position: relative;
padding-left: 10%;
font-family: familiar_probold;
font-size: 200%;
color: #ffccff;
/*border-bottom: 3px solid #B9CDBE;*/
padding-bottom: 3px;
text-decoration: none;
}
.container-element-unified-pgtop-2 .container-text-informationcheck-pgtop {
position: relative;
padding-top: 2%;
padding-left: 10%;
font-family: 'Arial';
font-size: 200%;
color: white;
padding-bottom: 10%;
}
.container-form-line {
background: #82359C;
height: 8px;
border: none;
}
.icons-image-form-pgmiddle {
padding-top: 2%;
vertical-align: center;
text-align: center;
}
.wideicon-image-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
}
.safetyicon-image-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
}
.freeicon-image-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
}
.container-element-unified-pgmiddle {
padding-top: 2%;
padding-bottom: 2%;
vertical-align: center;
text-align: center;
}
.container-element-unified-pgmiddle .widetext-text-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
font-size: 150%;
font-family: familiar_probold;
color: #1B1C1E;
}
.widetext-text-form-pgmiddle br {
font-family: Arial;
}
.safetytext-text-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
font-family: familiar_probold;
font-size: 150%;
color: #1B1C1E;
}
.safetytext-text-form-pgmiddle br {
font-family: Arial;
}
.freetext-text-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
font-family: familiar_probold;
font-size: 150%;
color: #1B1C1E;
}
.tutorialtext-text-form-pgmiddle {
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
font-family: 'uni_sansheavy_caps';
color: #1B1C1E;
font-size: 350%;
width: 100%;
}
.tutorialtext-text-form-pgmiddle p {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-family: 'Arial';
color: grey;
font-size: 50%;
width: 100%;
}
.circles {
margin: 0 auto;
}
.circles>div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.circles>div>div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 300%;
color: grey;
}
.circles>div>div>div {
display: table;
width: 100%;
height: 100%;
}
.circles>div>div>div>div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px) {
.circles>div {
padding: 50%;
}
}
#media (min-width: 321px) and (max-width: 800px) {
.circles>div {
padding: 25%;
}
}
#media (min-width: 801px) {
.circles {
width: 800px
}
.circles>div {
padding: 12.5%;
}
}
.circlescontent {
margin: 0 auto;
}
.circlescontent>div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
}
.circlescontent>div>div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: familiar_probold;
font-size: 200%;
color: grey;
}
.circlescontent>div>div>div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent>div>div>div>div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px) {
.circlescontent>div {
padding: 50%;
}
}
#media (min-width: 321px) and (max-width: 800px) {
.circlescontent>div {
padding: 25%;
}
}
#media (min-width: 801px) {
.circlescontent {
width: 800px
}
.circlescontent>div {
padding: 12.5%;
}
}
.container-form-pgmiddle {
padding-top: 4%;
padding-bottom: 4%;
}
.statementtext-text-form-pgmiddle {
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #1B1C1E;
font-size: 390%;
width: 100%;
}
.statementtext-text-form-pgmiddle p {
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: familiar_probold;
color: white;
font-size: 50%;
width: 100%;
color: grey;
}
.statementtextdescription-text-form-pgmiddle {
padding-top: 4%;
padding-bottom: 4%;
text-align: center;
font-family: 'uni_sansheavy_caps';
color: #1B1C1E;
font-size: 350%;
}
.buttonbkg {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 20vh;
padding-bottom: 4%;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: familiar_probold;
color: white;
box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam {
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238, 88, 63, .8) 30%, rgba(255, 255, 255, 0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
.container-form-pgend {
background-color: #1B1C1E;
padding-top: 1.125%;
padding-bottom: 1.125%;
position: relative;
}
.text-form-pgend-rights {
color: white;
margin-left: 1.5%;
font-family: familiar_probold;
font-size: 107.5%;
position: relative;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238, 88, 63, .5) 30%, rgba(255, 255, 255, 0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238, 88, 63, .5) 30%, rgba(255, 255, 255, 0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul {
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage {
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul {
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage {
display: none;
}
}
}
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="image-background-cover-pgtop">
<div class="container-element-unified-pgtop">
<div class="container-text-informationwebsite-pgtop">WEBSITE WITH TRULY FREE SKINS</div>
<div class="container-text-informationlow-pgtop">LOW ON SKINS?</div>
<div class="container-text-informationtime-pgtop">TIME TO GET NEW FREE!</div>
<div class="container-line-form-pgtop"></div>
</div>
<div class="container-element-unified-pgtop-2">
<div class="container-text-informationhow-pgtop">HOW IS THIS WORKING?</div>
<div class="container-text-informationcheck-pgtop">check how it works page or visit our YouTube</div>
</div>
</div>
<div class="container-form-line"></div>
<div class="icons-image-form-pgmiddle">
<img class="wideicon-image-form-pgmiddle" src="images/searchicon.svg" alt="Easy Search">
<img class="safetyicon-image-form-pgmiddle" src="images/simpleicon.svg" alt="Super Simple">
<img class="freeicon-image-form-pgmiddle" src="images/rewards.svg" alt="Easy Rewards">
</div>
<div class="container-element-unified-pgmiddle">
<div class="widetext-text-form-pgmiddle">WIDE
<p>SKINS SUPPLY</p>
</div>
<div class="safetytext-text-form-pgmiddle">SAFETY<br>GUARANTEED</div>
<div class="freetext-text-form-pgmiddle">FREE<br>USER REWARDS</div>
</div>
<div class="tutorialtext-text-form-pgmiddle">HOW CAN I DO IT?
<p>If you want your new skins complete the four easy steps.</p>
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
CHOOSE WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="container-form-pgmiddle"></div>
<div class="statementtext-text-form-pgmiddle">EASY AS THAT
<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p>
</div>
<div class="statementtextdescription-text-form-pgmiddle">WE SAID NO TO CATCHES!</div>
<div class="buttonbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
<div class="container-form-line"></div>
<div class="container-form-pgend">
<div class="text-form-pgend-rights">©2018-2019 “REFF SKINS” ALL RIGHTS RESERVED. FREE SKINS SERVICE.</div>
</div>

The issue is with the floated div inside each .circles and .cirlcescontent elements. They are being floated but they are not being cleared afterwards, so the rest of the document flow is breaking.
I have just added a wrapper around each group of .cirlces and .circlescontent and applied a :after pseudo element with clear:both;.
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'), url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'), url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'), url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* ####### ADDED CSS START ####### */
.clearme:after {
content:"";
display:table;
clear:both;
}
/* ####### ADDED CSS END ####### */
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background: url("images/background.jpg");
background-size: cover;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.image-background-cover-pgtop {
background-image: url("images/awpasiimov.jpeg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container-element-unified-pgtop .container-text-informationwebsite-pgtop {
position: relative;
padding-top: 10%;
padding-left: 10%;
padding-bottom: 1%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.container-element-unified-pgtop .container-text-informationlow-pgtop {
position: relative;
padding-left: 10%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: white;
}
.container-element-unified-pgtop .container-text-informationtime-pgtop {
position: relative;
padding-left: 10%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #82359C;
/* border-bottom: 6px solid #DCC98E;*/
padding-bottom: 1%;
}
.container-line-form-pgtop {
background: #82359C;
height: 6px;
border: none;
width: 45%;
margin-left: 10%;
position: relative;
}
.container-element-unified-pgtop-2 {
padding-top: 1%;
}
.container-element-unified-pgtop-2 .container-text-informationhow-pgtop a {
position: relative;
padding-left: 10%;
font-family: familiar_probold;
font-size: 200%;
color: #ffccff;
/*border-bottom: 3px solid #B9CDBE;*/
padding-bottom: 3px;
text-decoration: none;
}
.container-element-unified-pgtop-2 .container-text-informationcheck-pgtop {
position: relative;
padding-top: 2%;
padding-left: 10%;
font-family: 'Arial';
font-size: 200%;
color: white;
padding-bottom: 10%;
}
.container-form-line {
background: #82359C;
height: 8px;
border: none;
}
.icons-image-form-pgmiddle {
padding-top: 2%;
vertical-align: center;
text-align: center;
}
.wideicon-image-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
}
.safetyicon-image-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
}
.freeicon-image-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
}
.container-element-unified-pgmiddle {
padding-top: 2%;
padding-bottom: 2%;
vertical-align: center;
text-align: center;
}
.container-element-unified-pgmiddle .widetext-text-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
font-size: 150%;
font-family: familiar_probold;
color: #1B1C1E;
}
.widetext-text-form-pgmiddle br {
font-family: Arial;
}
.safetytext-text-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
font-family: familiar_probold;
font-size: 150%;
color: #1B1C1E;
}
.safetytext-text-form-pgmiddle br {
font-family: Arial;
}
.freetext-text-form-pgmiddle {
width: 15%;
height: auto;
margin-left: 5%;
margin-right: 5%;
display: inline-block;
font-family: familiar_probold;
font-size: 150%;
color: #1B1C1E;
}
.tutorialtext-text-form-pgmiddle {
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
font-family: 'uni_sansheavy_caps';
color: #1B1C1E;
font-size: 350%;
width: 100%;
}
.tutorialtext-text-form-pgmiddle p {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-family: 'Arial';
color: grey;
font-size: 50%;
width: 100%;
}
.circles {
margin: 0 auto;
}
.circles>div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.circles>div>div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 300%;
color: grey;
}
.circles>div>div>div {
display: table;
width: 100%;
height: 100%;
}
.circles>div>div>div>div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px) {
.circles>div {
padding: 50%;
}
}
#media (min-width: 321px) and (max-width: 800px) {
.circles>div {
padding: 25%;
}
}
#media (min-width: 801px) {
.circles {
width: 800px
}
.circles>div {
padding: 12.5%;
}
}
.circlescontent {
margin: 0 auto;
}
.circlescontent>div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
}
.circlescontent>div>div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: familiar_probold;
font-size: 200%;
color: grey;
}
.circlescontent>div>div>div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent>div>div>div>div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px) {
.circlescontent>div {
padding: 50%;
}
}
#media (min-width: 321px) and (max-width: 800px) {
.circlescontent>div {
padding: 25%;
}
}
#media (min-width: 801px) {
.circlescontent {
width: 800px
}
.circlescontent>div {
padding: 12.5%;
}
}
.container-form-pgmiddle {
padding-top: 4%;
padding-bottom: 4%;
}
.statementtext-text-form-pgmiddle {
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #1B1C1E;
font-size: 390%;
width: 100%;
}
.statementtext-text-form-pgmiddle p {
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: familiar_probold;
color: white;
font-size: 50%;
width: 100%;
color: grey;
}
.statementtextdescription-text-form-pgmiddle {
padding-top: 4%;
padding-bottom: 4%;
text-align: center;
font-family: 'uni_sansheavy_caps';
color: #1B1C1E;
font-size: 350%;
}
.buttonbkg {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 20vh;
padding-bottom: 4%;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: familiar_probold;
color: white;
box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam {
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238, 88, 63, .8) 30%, rgba(255, 255, 255, 0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
.container-form-pgend {
background-color: #1B1C1E;
padding-top: 1.125%;
padding-bottom: 1.125%;
position: relative;
}
.text-form-pgend-rights {
color: white;
margin-left: 1.5%;
font-family: familiar_probold;
font-size: 107.5%;
position: relative;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238, 88, 63, .5) 30%, rgba(255, 255, 255, 0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238, 88, 63, .5) 30%, rgba(255, 255, 255, 0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul {
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage {
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul {
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage {
display: none;
}
}
}
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="image-background-cover-pgtop">
<div class="container-element-unified-pgtop">
<div class="container-text-informationwebsite-pgtop">WEBSITE WITH TRULY FREE SKINS</div>
<div class="container-text-informationlow-pgtop">LOW ON SKINS?</div>
<div class="container-text-informationtime-pgtop">TIME TO GET NEW FREE!</div>
<div class="container-line-form-pgtop"></div>
</div>
<div class="container-element-unified-pgtop-2">
<div class="container-text-informationhow-pgtop">HOW IS THIS WORKING?</div>
<div class="container-text-informationcheck-pgtop">check how it works page or visit our YouTube</div>
</div>
</div>
<div class="container-form-line"></div>
<div class="icons-image-form-pgmiddle">
<img class="wideicon-image-form-pgmiddle" src="images/searchicon.svg" alt="Easy Search">
<img class="safetyicon-image-form-pgmiddle" src="images/simpleicon.svg" alt="Super Simple">
<img class="freeicon-image-form-pgmiddle" src="images/rewards.svg" alt="Easy Rewards">
</div>
<div class="container-element-unified-pgmiddle">
<div class="widetext-text-form-pgmiddle">WIDE
<p>SKINS SUPPLY</p>
</div>
<div class="safetytext-text-form-pgmiddle">SAFETY<br>GUARANTEED</div>
<div class="freetext-text-form-pgmiddle">FREE<br>USER REWARDS</div>
</div>
<div class="tutorialtext-text-form-pgmiddle">HOW CAN I DO IT?
<p>If you want your new skins complete the four easy steps.</p>
</div>
<!-- Added wrapper START -->
<div class="clearme">
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
</div>
<!-- Added wrapper END -->
<!-- Added wrapper START -->
<div class="clearme">
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
CHOOSE WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
</div>
<!-- Added wrapper END -->
<div class="container-form-pgmiddle"></div>
<div class="statementtext-text-form-pgmiddle">EASY AS THAT
<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p>
</div>
<div class="statementtextdescription-text-form-pgmiddle">WE SAID NO TO CATCHES!</div>
<div class="buttonbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
<div class="container-form-line"></div>
<div class="container-form-pgend">
<div class="text-form-pgend-rights">©2018-2019 “REFF SKINS” ALL RIGHTS RESERVED. FREE SKINS SERVICE.</div>
</div>

The text is ok only when the size of the window is very small
As I understand this works fine for resolution less than 800px (of page width).
You use the size of .circles in pixels for '#media' here:
#media (min-width: 801px) {
.circlescontent {
width: 100px;
}
}
Twice. The percent usage also corrected your issue:
#media (min-width: 801px) {
.circlescontent {
width: 100%;
}
}
Look lines #347 and #403 in your CSS file.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Css Order does not position correctly - html

Related

My HTML and CSS nav bar is not working on IPhones

What in my CSS is making my header/nav bar display incorrectly?

Site works fine in Brave and Microsoft Edge (chromium based) but has problem in Firefox

not able to align in same row

Why is the text being pushed up?

Categories

Resources