Why is the text being pushed up?

Why is the text being pushed up? - html

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.

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>

Showing overflow when reduced and expanded the screen again in my html page eventhough overflow is hidden

I have an issue in my web page as given in this video(https://kapwi.ng/c/510TefvT).
when i decrease the screen size its responsive and in that decreased screen size when i scroll down and again changes the screen size back to desktop mode it show this overflow. below is the css and html of my page.
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
}
#media only screen and (min-width:1071px) {
.container {
width: 100%;
height: 100vh;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box;
}
.navbar {
width: 100%;
display: flex;
align-items: center;
}
nav {
padding-left: 2%;
padding-top: 2%;
}
nav h1 {
font-size: 40px;
font-weight: bolder;
}
nav span {
color: #771633;
}
nav h6 {
margin: 2px 20px;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
/* margin: 70px 0; */
}
.col-1 {
flex-basis: 50%;
position: relative;
margin-left: 10px;
margin-top: 5%;
}
.col-1 h2 {
font-size: 30px;
color: #771633;
font-weight: bolder;
}
.col-1 p {
font-size: 16px;
font-weight: 100%;
margin-top: 2%;
width: 100%;
}
.col-1 img {
width: 150px;
height: 150px;
border: 0;
padding: 1% 0;
outline: none;
display: inline-block;
padding-right: 50px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.col-2 {
position: relative;
flex-basis: 60%;
display: flex;
align-items: center;
justify-content: right;
margin-top: -10%;
}
.screen {
position: absolute;
width: 22%;
right: 2%;
top: 2%;
}
.backgroundright {
background-image: url('assets/Background.jpeg');
background-repeat: no-repeat;
position: absolute;
right: -5%;
top: 30%;
width: 900px;
height: 527px;
z-index: -1;
border-radius: 1000px 350px 900px 100px;
transform: rotate(-9.85deg);
}
footer {
position: relative;
}
#developedBy {
justify-content: center;
align-content: flex-start;
display: flex;
font-size: medium;
font-weight: lighter;
margin-top: -4%;
color: #929292;
}
.backgroundleft {
position: absolute;
width: 400px;
height: 300px;
top: 68%;
left: 0%;
z-index: -1;
background: url(assets/index.jpeg);
border-radius: 0px 0px 200px 500px;
transform: rotate(-179.57deg);
}
.fb {
position: absolute;
width: 3vw;
height: 3vw;
left: 2vw;
top: 90%;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
/* twitter-social-logotype 2 */
.twitter {
position: absolute;
width: 3vw;
height: 3vw;
left: 6vw;
top: 90%;
background: url(assets/twitter-social-logotype.png);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
/* instagram 2 */
.insta {
position: absolute;
width: 3vw;
height: 3vw;
left: 10vw;
top: 90%;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.social {
display: none;
}
}
#media only screen and (max-width:1070px) {
* {
overflow: auto;
}
.navbar {
width: 100%;
display: flex;
align-items: center;
}
nav {
padding-left: 2%;
padding-top: 2%;
}
nav h1 {
font-size: 30px;
font-weight: bolder;
}
nav span {
color: #771633;
}
nav h6 {
margin: 2px 10px;
font-size: 10px;
}
.row {
flex-direction: column;
}
.col-2 {
flex-basis: 100%;
}
.screen {
width: 100%;
height: auto;
position: relative;
transform: translateX(0%);
}
.container {
width: 100%;
height: 100%;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
overflow: auto;
}
.backgroundright {
display: none;
}
.backgroundleft {
display: none;
}
.col-1 {
flex-basis: 50%;
position: unset;
top: 7%;
}
.col-1 h2 {
font-size: 100%;
color: #771633;
font-weight: bolder;
}
.col-1 p {
font-size: 100%;
font-weight: 100%;
margin-top: 2%;
width: 100%;
}
.col-1 img {
width: 30%;
height: auto;
border: 0;
padding: 0px 0;
outline: none;
display: inline-flex;
padding-right: 0px;
/* align-content: center; */
justify-content: center;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
#playstore {
padding-right: 10%;
padding-left: 15%;
}
#developedBy {
justify-content: center;
align-content: flex-start;
display: flex;
margin-top: auto;
color: #929292;
}
.footer {
display: none;
}
.social {
text-align: center;
}
.socialmedia {
padding: 2% 5%;
align-self: center;
}
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<div class="container">
<div class="navbar">
<nav>
<h1>My<span class="wein">Webpage</span></h1>
</nav>
</div>
<div class="row">
<div class="col-1">
<h2>Its a Web Page</h2>
<p>abcdefghijklmnopqrstuvwxyz</p>
<a href="https://play.google.com/store/">
<img id="playstore" src="assets/playstoredownload.png" alt="">
</a>
<a href="https://www.apple.com/in/app-store/">
<img id="appstore" src="assets/appstoredownload.png" alt="">
</a>
</div>
</div>
<img src="assets/images.jpeg" alt="Image of a Phone" class="screen">
<div class="backgroundright"></div>
<div class="footer">
<div class="backgroundleft"></div>
<a href="https://www.facebook.com/">
<img src="assets/facebook-circular-logo.png" alt="" class="fb">
</a>
<a href="https://www.instagram.com/">
<img src="assets/instagram.png" alt="" class="insta">
</a>
<a href="https://www.twitter.com/">
<img src="assets/twitter-social-logotype.png" class="twitter" alt="">
</a>
</div>
</div>
<div class="social">
<a href="https://www.facebook.com/">
<img src="assets/facebook-black.png" alt="" class="socialmedia" height="30vh" width="30vh">
</a>
<a href="https://www.instagram.com/">
<img src="assets/instagram-black.png" alt="" class="socialmedia" height="30vh" width="30vh">
</a>
<a href="https://www.twitter.com/">
<img src="assets/twitter-black.png" alt="" class="socialmedia" height="30vh" width="30vh">
</a>
</div>
<h6 id="developedBy">Developed by abcdefg</h6>
is there any solution for this?

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>

Site doesn't fit the viewport

I am running into some issues with resizing of the window (shrinking). When I shrink it down, the background colors no longer stay at the edge of the viewport, and content goes beyond it.
I thought that setting the width on the entire body to 100% would fix that, but it didn't?
Here is a JSFiddle of my current code, for the index page and the stylesheet:
* {
margin: 0;
padding: 0;
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
width: 100%;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px 60px 60px 60px;
}
.buttons {
position: relative;
width: 1600px;
margin-right: 25px;
justify-content: space-around;
display: flex;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have tried going through my stylesheet, changing the widths on anything I have set with pixels to percentages, but it didn't seem to fix it. The only thing that -sort of- worked was changing the body position to fixed, but then none of the content was view-able if it got shrunk down, all it fixed was keeping the background/header/footer colors the same.
I imagine maybe my coding is a bit messy - I tried my best to be extensible, but being 100% new at this made it difficult.

Your problem is that you have width:1600px in .buttons just remove it and also add box-sizing:border-box to all (pseudo-)elements
EDIT:
you also need to add max-width:100% to .container and flex-wrap:wrap in .buttons
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.container {
max-width: 100%
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px;
}
.buttons {
position: relative;
margin-right: 25px;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>

I have made it proper as you needed. And it's working for me.
Please add below css
.container, .buttons {
max-width: 100%;
}

We Keep Coding

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

Why is the text being pushed up? - 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?

Showing overflow when reduced and expanded the screen again in my html page eventhough overflow is hidden

not able to align in same row

Site doesn't fit the viewport

Categories

Resources