I have a header that works perfectly fine in its own html file and I have a product details page that also is fine on its own. When I add the header to the product page it messes up entirely and pushes the header out of the way, placing part of the product details to the right of the header.
I tried using inspect element and found no padding or magins that would be doing this and adding a margin or padding does not fix the issue.
I assume it's a problem with the product page as inspect element does highlight that section of the page when I was troubleshooting.
Any help would be amazing!
some of the product html (https://i.stack.imgur.com/tsGDT.png)](https://i.stack.imgur.com/tsGDT.png)
PRODUCT HTML:
#import url(https://fonts.googleapis.com/css2?family=Rubik:wght#100;200;300;400;500;600;800;900&display=swap);
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.small-container{
max-width: 1000%;
margin: auto;
padding-left: 25px;
padding-right: 20px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product{
margin-top: 80px;
}
.small-img-row{
display: flex;
justify-content: space-around;
max-width: 300px;
max-height: 500px;
}
.col-2 img {
max-width: 100%;
/* padding: 0px 0; */
max-width: 300px;
max-height: 500px;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2{
padding: 20;
}
.col-2{
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1{
font-size: 50px;
line-height: 60px;
margin: 5px 0;
}
.single-product select{
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4{
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
a{
text-decoration: none;
}
p{
color: #9ba0a3;
margin-top: 10px;
}
.btn{
display: inline-block;
background: #4B7AB4;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #314f74;
}
.header{
width: 100%;
height: 80px;
display: block;
/* background-color: #101010; */
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background-nav.png);
background-size: cover;
}
.inner-header{
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
/* background-color: red; */
}
.logo-container{
height: 100%;
display: table;
float: left;
}
.logo-container img{
max-width: 60px;
max-height: 60px;
display: table-cell;
padding: 10px;
vertical-align: middle;
}
.navigation{
float: right;
height: 100%;
}
.navigation a{
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li{
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family:'Rubik';
font-size: 16px;
}
.gibsonrating {
list-style: none;
display: flex;
justify-content: left;
align-items: center;
padding-top: 0;
}
li {
padding-top: 5px;
}
.fa {
font-size: 10px;
margin: 1px;
color: #939a9e;
}
.checked {
color: #ff9f43;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>fret - Guitars for the People!</title>
<link rel="stylesheet" type="text/css" href="./gibson.css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
rel="stylesheet" type='text/css'>
</head>
<body>
<div class="header">
<div class="inner-header">
<div class="logo-container">
<img src="fretlogo.png"/>
</div>
<ul class="navigation">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Login</li>
</ul>
</div>
</div>
<div class="smallcontainer" single-product>
<div class="row">
<div class="col-2">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180483.jpg" width="100%"
id="ProductImg">
<div class="small-img-row">
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180543.jpg" width="100%"
class="small-img">
</div>
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180503.jpg" width="100%"
class="small-img">
</div>
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180483.jpg" width="100%"
class="small-img">
</div>
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180534.jpg" width="100%"
class="small-img">
</div>
</div>
</div>
<div class="col-2">
<p>Home / Gibson G-200</p>
<h1>Gibson G-200</h1>
<h4>€1,990</h4>
<select>
<option>Select Quantity</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5+</option>
</select>
<ul class="gibsonrating">
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star-half-o checked"></i></li>
</ul>
Add to Cart
<h3>Product Details</h3>
<br>
<p>
<ul>
<li>Body Shape: J-200 with cutaway</li>
<li>Top: solid Sitka spruce</li>
<li>Neck: utile</li>
<li>Profile: advanced response</li>
<li>Dovetail neck construction</li>
<li>Fretboard: striped ebony</li>
<li>Fretboard inlays: G-collection single bars</li>
<li>Nut width 43,80 mm (1,725")</li>
<li>Scale: 648 mm (25,5")</li>
<li>Made in Bozeman, USA</li>
</ul>
</p>
</div>
</div>
</div>
</body>
</html>
PRODUCT CSS:
product page on its own (https://i.stack.imgur.com/Vnd9J.png)](https://i.stack.imgur.com/Vnd9J.png)
header on its own (https://i.stack.imgur.com/eQE3g.png)](https://i.stack.imgur.com/eQE3g.png)
the mix of both the header and the product details (https://i.stack.imgur.com/9y2t1.png)](https://i.stack.imgur.com/9y2t1.png)
I tried looking for disruptive padding and margins
I tried adding padding and margins to the smallcontainer and row in css
If your header and your product page are wrapped into a .row, the behavior is pretty normal (a row is made to manage its child vertically).
https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
You should remove it or change it to a .col.
.col{
display:flex;
flex-flow:column;
}
I believe you might have a float problem. You are using floats but I don't see and clearfixes for them. This could create such behaviour.
In general I recommend using float only to wrap text around another element and otherwise get rid of it. You should use flexbox more often.
As I couldn't reconstruct your problem with the code given I just removed the float:
full codepen here
adapted css:
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.small-container{
max-width: 1000%;
margin: auto;
padding-left: 25px;
padding-right: 20px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product {
margin-top: 80px;
}
.small-img-row {
display: flex;
justify-content: space-around;
max-width: 300px;
max-height: 500px;
}
.col-2 img {
max-width: 100%;
/* padding: 0px 0; */
max-width: 300px;
max-height: 500px;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2 {
/* CAREFUL: was 20 only! if it's not 0, don't forget to add a unit! */
padding: 20px;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1 {
font-size: 50px;
line-height: 60px;
margin: 5px 0;
}
.single-product select {
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4 {
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
a {
text-decoration: none;
}
p {
color: #9ba0a3;
margin-top: 10px;
}
.btn {
display: inline-block;
background: #4B7AB4;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #314f74;
}
.header {
display: block;
width: 100%;
height: 80px;
/* background-color: #101010; */
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background-nav.png);
background-size: cover;
}
.inner-header {
display: flex; /*changed*/
justify-content: space-between;
align-items: center;
width: 1000px;
height: 100%;
margin: 0 auto;
/* background-color: red; */
}
/*changed*/
.logo-container {
display: flex;
justify-content: center;
align-items: center;
}
.logo-container img {
max-width: 60px;
max-height: 60px;
/* display: table-cell;
padding: 10px;
vertical-align: middle; */
}
/*changed*/
.navigation {
display: flex;
height: 100%;
/* float: right; */
}
/*changed*/
.navigation a {
height: 100%;
display: table;
/* float: left; */
/* padding: 0px 20px; */
}
/*added*/
.navigation a + a {
margin-left: 20px;
}
.navigation a li {
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family:'Rubik';
font-size: 16px;
}
.gibsonrating {
list-style: none;
display: flex;
justify-content: left;
align-items: center;
padding-top: 0;
}
li {
padding-top: 5px;
}
.fa {
font-size: 10px;
margin: 1px;
color: #939a9e;
}
.checked {
color: #ff9f43;
}
I marked the changed parts with a comment. You also had an other error, a missing unit for a padding.
If your problem is not fixed with this check out JohnSs answer as you might have a container around it with display: flex; and as he stated the incorrect flex-direction.
Related
I am making a website. I have a problem now.
This is my website right now. As you can see the blue logo in the middle must be against the top. Does anyone know how I can get it against the top? Does that has to do with the flex-box? If that's the case can I get some explanation about the flexbox? Thanks in advance!
HTML:
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div class="header">
<div class="col-1">
<div id="mainbox" onclick="openFunction()">☰</div>
<div class="nav">
<ul>
<li> <img src="images/minis1.png" class="logo"></li>
</ul>
</div>
<div class="left-text">
<h1><span class="auto-type"></span></h1>
Ontdek meer
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<script>
var typed = new Typed(".auto-type", {
strings: ["Moed", "Beleid", "Eer", "Trouw", "Trots", "NUNC AUT NUNQUAM"],
typeSpeed: 150,
backSpeed: 150,
loop: false,
});
</script>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
.header{
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
}
.col-1{
flex-basis: 100%;
flex-grow: 1;
background-image: url(images/kct.jpg);
background-size: cover;
background-position: center;
color: #fff
}
.logo{
width: 55px;
cursor: pointer;
}
.nav{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav ul{
display: flex;
list-style: none;
}
.left-text{
width: 70%;
margin: 230px auto 0;
}
.left-text h1 span{
font-size: 50px;
font-weight: 500;
}
.left-text a img{
width: 60px;
margin-right: 20px;
}
.left-text a{
/* display: flex; */
align-items: center;
text-decoration: none;
margin: 30px 0 30px;
display: inline-block;
background: transparent;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
padding: 15px 50px;
border-radius: 30px;
border: 4px solid #fff; /*922125*/
}
.left-text a:hover{
background: #fff;
color: #333
}
#mainbox{
font-size: 35px;
}
The problem is that #mainbox takes the whole width and .nav goes down. One solution would be to make .nav position absolute and top 0.
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
.header{
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
}
.col-1{
flex-basis: 100%;
flex-grow: 1;
background-image: url(images/kct.jpg);
background-size: cover;
background-position: center;
color: #fff
}
.logo{
width: 55px;
cursor: pointer;
}
.nav{
position:absolute;
top:0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav ul{
display: flex;
list-style: none;
}
.left-text{
width: 70%;
margin: 230px auto 0;
}
.left-text h1 span{
font-size: 50px;
font-weight: 500;
}
.left-text a img{
width: 60px;
margin-right: 20px;
}
.left-text a{
/* display: flex; */
align-items: center;
text-decoration: none;
margin: 30px 0 30px;
display: inline-block;
background: transparent;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
padding: 15px 50px;
border-radius: 30px;
border: 4px solid #fff; /*922125*/
}
.left-text a:hover{
background: #fff;
color: #333
}
#mainbox{
font-size: 35px;
}
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div class="header">
<div class="col-1">
<div id="mainbox" onclick="openFunction()">☰</div>
<div class="nav">
<ul>
<li> <img src="images/minis1.png" class="logo"></li>
</ul>
</div>
<div class="left-text">
<h1><span class="auto-type"></span></h1>
Ontdek meer
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<script>
var typed = new Typed(".auto-type", {
strings: ["Moed", "Beleid", "Eer", "Trouw", "Trots", "NUNC AUT NUNQUAM"],
typeSpeed: 150,
backSpeed: 150,
loop: false,
});
</script>
</body>
</html>
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>
I am practicing my layout but I'm facing a problem with my layout. I'm a beginner with flex and grid CSS. As you can see in the picture the horizontal scrollbar shows when the screen width is 1440 or above. I don't want to show that. I also tried the overflow-x: hidden but it always shows. How can I fix that? Thanks so much!
This is my code:
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#100;300;400;500;600;800&display=swap");
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.5;
color: #262626;
}
a {
text-decoration: none;
color: #262626;
}
ul,
li,
ol {
list-style: none;
margin: 0;
padding: 0;
}
.btn {
width: 105px;
cursor: pointer;
height: 36px;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 36px;
border-radius: 20px;
text-transform: uppercase;
border: none;
}
.btn-none {
color: #037cff;
background: #fff;
}
.btn-primary {
color: #fff;
background: #037cff;
}
.btn-secondary {
color: #037cff;
background: #e6f2ff;
}
.section-title {
font-size: 32px;
}
.main-container {
position: relative;
width: 100%;
height: 100%;
max-width: 1200px;
margin: 0 auto;
align-items: center;
padding: 0 20px;
}
.main-container .nav-section {
position: absolute;
top: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 20px 0;
}
.main-container .nav-section .logo-container h2 {
font-size: 20px;
color: #007cff;
width: 128px;
margin: 0;
cursor: pointer;
}
.main-container .nav-section ul.menu-container {
display: flex;
}
.main-container .nav-section ul li {
padding: 0 10px;
}
.main-container .nav-section ul li a {
font-size: 14px;
}
.main-container .nav-section .btn-container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.main-container .hero-container {
width: 100%;
display: grid;
height: calc(100vh - 80px);
grid-template-columns: repeat(2, 1fr);
padding-top: 100px;
column-gap: 12px;
align-items: center;
margin-bottom: 50px;
}
.main-container .hero-container .hero-text-container {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 580px;
}
.main-container .hero-container .hero-text-container h1 {
font-size: 48px;
font-weight: 800;
margin: 0;
}
.main-container .hero-container .hero-text-container h1 span {
color: #007cff;
}
.main-container .hero-container .hero-text-container p:last-child {
font-size: 16px;
font-weight: 400;
}
.main-container .hero-container .hero-image-container img {
max-width: 580px;
max-height: 560px;
height: auto;
width: 100%;
vertical-align: bottom;
margin-top: 25px;
}
.main-container .hero-container button {
width: 300px;
border-radius: 8px;
height: 55px;
margin-bottom: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gadget Store</title>
</head>
<body>
<div class="main-container">
<!-- Nav Section -->
<nav class="nav-section">
<div class="logo-container">
<h2>Gadget <span>Zone</span></h2>
</div>
<ul class="menu-container">
<li>Home</li>
<li>Reviews</li>
<li>Deals</li>
<li>Gears</li>
<li>Gaming</li>
<li>Entertainment</li>
</ul>
<div class="btn-container">
<button class="btn btn-none">Sign In</button>
<button class="btn btn-primary btn-rad">Login</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-container">
<div class="hero-text-container">
<h1>
Best way to <br />
find your <span>gadget</span> needs.
</h1>
<p>
Find the latest technology news and expert tech product reviews.
<br />
Learn about the latest gadgets and consumer tech products for
entertainment, gaming, lifestyle and more.
</p>
<p>All gadgets are priced to be customer-friendly.</p>
</div>
<div class="hero-image-container">
<img src="https://svgshare.com/i/b9d.svg" alt="Hero" />
</div>
<button class="btn btn-secondary">Learn more</button>
</section>
<!-- Reviews Section -->
<section class="reviews-section">
<h1 class="section-title">Latest Reviews</h1>
</section>
</div>
</body>
</html>
Hiding overflow isn't usually a solution--it just masks problems. The best approach in cases like this is often to start removing widths from things. You're forcing some that don't help.
Here, set the left value of your navbar so it's in frame. You may need to add padding to move the logo and button over.
Then, remove the width rule from the main container element.
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#100;300;400;500;600;800&display=swap");
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.5;
color: #262626;
}
a {
text-decoration: none;
color: #262626;
}
ul,
li,
ol {
list-style: none;
margin: 0;
padding: 0;
}
.btn {
width: 105px;
cursor: pointer;
height: 36px;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 36px;
border-radius: 20px;
text-transform: uppercase;
border: none;
}
.btn-none {
color: #037cff;
background: #fff;
}
.btn-primary {
color: #fff;
background: #037cff;
}
.btn-secondary {
color: #037cff;
background: #e6f2ff;
}
.section-title {
font-size: 32px;
}
.main-container {
position: relative;
height: 100%;
max-width: 1200px;
margin: 0 auto;
align-items: center;
padding: 0 20px;
}
.main-container .nav-section {
position: absolute;
left: 0; /* <----------------------------------------- HERE */
top: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 20px 0;
}
.main-container .nav-section .logo-container h2 {
font-size: 20px;
color: #007cff;
width: 128px;
margin: 0;
cursor: pointer;
}
.main-container .nav-section ul.menu-container {
display: flex;
}
.main-container .nav-section ul li {
padding: 0 10px;
}
.main-container .nav-section ul li a {
font-size: 14px;
}
.main-container .nav-section .btn-container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.main-container .hero-container {
display: grid;
height: calc(100vh - 80px);
grid-template-columns: repeat(2, 1fr);
padding-top: 100px;
column-gap: 12px;
align-items: center;
margin-bottom: 50px;
}
.main-container .hero-container .hero-text-container {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 580px;
}
.main-container .hero-container .hero-text-container h1 {
font-size: 48px;
font-weight: 800;
margin: 0;
}
.main-container .hero-container .hero-text-container h1 span {
color: #007cff;
}
.main-container .hero-container .hero-text-container p:last-child {
font-size: 16px;
font-weight: 400;
}
.main-container .hero-container .hero-image-container img {
max-width: 580px;
max-height: 560px;
height: auto;
width: 100%;
vertical-align: bottom;
margin-top: 25px;
}
.main-container .hero-container button {
width: 300px;
border-radius: 8px;
height: 55px;
margin-bottom: 100px;
}
<div class="main-container">
<!-- Nav Section -->
<nav class="nav-section">
<div class="logo-container">
<h2>Gadget <span>Zone</span></h2>
</div>
<ul class="menu-container">
<li>Home</li>
<li>Reviews</li>
<li>Deals</li>
<li>Gears</li>
<li>Gaming</li>
<li>Entertainment</li>
</ul>
<div class="btn-container">
<button class="btn btn-none">Sign In</button>
<button class="btn btn-primary btn-rad">Login</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-container">
<div class="hero-text-container">
<h1>
Best way to <br />
find your <span>gadget</span> needs.
</h1>
<p>
Find the latest technology news and expert tech product reviews.
<br />
Learn about the latest gadgets and consumer tech products for
entertainment, gaming, lifestyle and more.
</p>
<p>All gadgets are priced to be customer-friendly.</p>
</div>
<div class="hero-image-container">
<img src="https://svgshare.com/i/b9d.svg" alt="Hero" />
</div>
<button class="btn btn-secondary">Learn more</button>
</section>
<!-- Reviews Section -->
<section class="reviews-section">
<h1 class="section-title">Latest Reviews</h1>
</section>
</div>
I have been developing a product landing page to practice & enhance my skills in responsive web designs. Here is what I have achieved so far. https://jsfiddle.net/Ghazi360/qj8zLp16/1/
I am having issues with the width of my divs. I can not figure out why are they not occupying full screen width & leaving a white empty border on the right side like this:
I have set
* {
box-sizing: border-box
}
& the width of Container div is also set to 100%. Kindly help me out with this. I hope I have been able to explain my problem.
Just do an overflow:hidden; on Container and you are good to go.
Note: These bugs are a bit difficult to catch. Always start debugging in developer window first ( A small tip)
CODEPEN LINK: https://codepen.io/emmeiWhite/pen/dypQqYz
#Container {
width: 100%;
background-color: #f5f5f5;
overflow: hidden; /*Add this */
}
FULL CODE:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
width: 100%;
}
#Container {
width: 100%;
background-color: #f5f5f5;
overflow:hidden;
}
#header {
width: 100%;
height: 50px;
background-color: red;
display: grid;
grid-template-columns: 30% 70%;
grid-gap: 10px;
position: fixed;
}
#headerImg {
width: 100%;
height: 50px;
background-image: url("https://freesvg.org/img/optical.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
#header-img {
display: none;
}
#nav-bar {
width: 100%;
height: 50px;
background-color: rgb(126, 126, 31);
text-align: center;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav-link {
font-size: 18px;
font-family: poppins;
text-decoration: none;
color: white;
border-bottom: 2px solid black;
}
.nav-link:hover {
transition: .8s;
color: black;
border-bottom: 2px solid white;
}
#About {
width: 100%;
height: 300px;
background-color: chocolate;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#About h1 {
font-size: 42px;
font-family: poppins;
margin-top: 40px;
padding: 5px;
}
#About p {
font-size: 18px;
font-family: poppins;
padding: 10px;
}
#media only screen and (max-width: 425px) {
.nav-link {
font-size: 12px;
}
#About {
height: 430px;
}
#About h1 {
font-size: 32px;
}
#About p {
font-size: 14px;
}
}
#Features {
width: 100%;
height: 500px;
background-color: brown;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 25% 75%;
grid-gap: 10px;
}
.premiumIcon {
width: 82px;
background-image: url("https://www.flaticon.com/svg/vstatic/svg/2997/2997131.svg?token=exp=1610648143~hmac=0e319e924a0a195adb6360e2ea9596c8");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
.fastIcon {
width: 82px;
background-image: url("https://www.flaticon.com/svg/vstatic/svg/1792/1792671.svg?token=exp=1610648298~hmac=ae66efe447d060ac530f58333ef179f6");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
.qualityIcon {
width: 82px;
background-image: url("https://www.flaticon.com/svg/vstatic/svg/2649/2649798.svg?token=exp=1610646201~hmac=12c57329928c0f4774f73b68b9359a54");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
.desc {
padding: 15px 5px 0px 5px;
}
.desc h2 {
font-size: 22px;
font-family: poppins;
padding: 10px;
}
.desc p {
font-size: 14px;
font-family: poppins;
padding: 10px;
}
#media only screen and (max-width: 425px) {
#Features {
height: 500px;
}
.grid {
height: 100px;
}
.premiumIcon,
.fastIcon,
.qualityIcon {
width: 52px;
}
.desc {
padding: 0;
}
.desc h2 {
font-size: 16px;
}
.desc p {
font-size: 12px;
}
}
#Video {
width: 100%;
height: 400px;
background-color: chartreuse;
display: flex;
justify-content: center;
align-items: center;
}
#Video iframe {
max-width: 560px;
}
#Products {
width: 100%;
height: 300px;
background-color: darkorchid;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: row;
flex-wrap: wrap;
}
#media only screen and (max-width: 425px) {
#Products {
height: 700px;
}
}
.card {
max-width: 200px;
height: 215px;
background: rgb(163, 86, 86);
display: flex;
flex-direction: column;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
transition: 0.3s ease-in-out;
}
.imgBx {
width: 200px;
height: 215px;
}
.img1 {
background-image: url("https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.img2 {
background-image: url("https://images.unsplash.com/photo-1509695507497-903c140c43b0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.img3 {
background-image: url("https://lh3.googleusercontent.com/proxy/3lUUwuh-2MSiNDoxUeLIhenDfsd5c5OXJ71uG16L8_ciXyQG-9tKphBYpx4Z6oHqiWQWP_i7tvbvlX0DABn6jv6xsUkEvEOIdbStL22RSV9AFqBzHi2Dqnpi05_h8kmqWqLacaWDv5_lWpVvsVQ");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.card:hover {
height: 250px;
}
.card .content {
position: relative;
margin-top: -140px;
padding: 10px 15px;
text-align: center;
color: #111;
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in-out;
}
.card:hover .content {
visibility: visible;
opacity: 1;
margin-top: -10px;
transition-delay: 0.3s;
}
.content h2 {
color: black;
font-size:30px;
font-family: poppins;
}
#form {
width: 100%;
height: 200px;
background-color: dodgerblue;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
#form h2 {
font-family: poppins;
padding-bottom: 30px;
text-align: center;
}
#email {
width: 50%;
height: 50px;
border-radius: 30px;
padding-left: 10px;
border: none;
outline: none;
font-size: 18px;
font-family: poppins;
box-sizing: border-box;
}
#submit {
width: 100px;
height: 40px;
margin-top: 10px;
font-size: 20px;
font-family: poppins;
border: none;
border-radius: 6px;
outline: none;
cursor: pointer;
text-align: center;
}
#media only screen and (max-width: 425px) {
#form {
height: 300px;
}
#email {
width: 250px;
}
}
#footer {
margin-top: 30px;
background-color: #ddd;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
list-style: none;
}
#footer li {
padding: 0 10px;
}
#footer a {
font-size: 14px;
font-family: poppins;
color: #000;
text-decoration: none;
}
#footer span {
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: #444;
font-size: 14px;
font-family: poppins;
}
<div id="Container">
<header id="header">
<div id="headerImg">
<img id="header-img" src="https://freesvg.org/img/optical.png" alt="Logo" id="header-img">
</div>
<nav id="nav-bar">
<a class="nav-link" href="#About">About</a>
<a class="nav-link" href="#Features">Features</a>
<a class="nav-link" href="#Products">Pricing</a>
</nav>
</header>
<div id="About">
<h1>Ghazi Eyewear</h1>
<p> Pakistan's Leading Online Sunglasses Shop Established 2004
Ghazi Eyewear stands out for its exclusive eyewear, glamorous frames
and colors to match your confidence.
Ghazi Eyewear provide you with the most complete eye care possible.
In our online store, you can choose from an excellent selection of
named brands. Ghazi Eyewear is offering
exceptional range of Men's Original Sunglasses at amazing
prices in Pakistan, accompanied with free home delivery to your
door step. We guarantee for providing best and reliable perfect frames.
We also provide the best prescription eyewear.
</p>
</div>
<div id="Features">
<div class="grid">
<div class="premiumIcon"></div>
<div class="desc">
<h2>Premium Materials</h2>
<p> Our frames use the finest material which is sourced locally.
This will increase the longevity of your purchase.
</p>
</div>
</div>
<div class="grid">
<div class="fastIcon"></div>
<div class="desc">
<h2>Fast Shipping</h2>
<p> We make sure you recieve your glasses as soon as we have finished
making it. We also provide free returns if you are not satisfied.
</p>
</div>
</div>
<div class="grid">
<div class="qualityIcon"></div>
<div class="desc">
<h2>Quality Assurance</h2>
<p> For every purchase you make, we will ensure there are no damages or
faults and we will check and test the quality of your purchase.
</p>
</div>
</div>
</div>
<div id="Video">
<iframe id="video" height="315px" width="560px" src="https://www.youtube.com/embed/wwM9mnw4v4s" allowfullscreen="true"></iframe>
</div>
<div id="Products">
<div class="card">
<div class="imgBx img1"></div>
<div class="content">
<h2>Men Sunglasses</h2>
</div>
</div>
<div class="card">
<div class="imgBx img2"></div>
<div class="content">
<h2>Women Sunglasses</h2>
</div>
</div>
<div class="card">
<div class="imgBx img3"></div>
<div class="content">
<h2>Eye Care Products</h2>
</div>
</div>
</div>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<h2>Subscribe to our Newsletter!</h2>
<input name="email" id="email" type="email" placeholder="Enter your email" required>
<input name="submit" id="submit" type="submit" value="subscribe">
</form>
<footer id="footer">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<span>Copyright 2021, Ghazi 360</span>
</footer>
</div>
What is causing the overflow is the grid-gap property in #header and .grid, they are not counted towards the percentage values you've added, you should remove that and use padding to create the desired spacing.
Edit:
#header {
width: 100%;
height: 50px;
background-color: red;
display: grid;
grid-template-columns: 30% 70%;
/* grid-gap: 10px; remove this */
position: fixed;
}
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 25% 75%;
/* grid-gap: 10px; and this */
}
Edit 2:
Alternatively you can also use the fr unit to occupy the remaining space and still use the grid-gap property:
#header {
width: 100%;
height: 50px;
background-color: red;
display: grid;
grid-template-columns: 30% 1fr; /* 1fr will be 70% - 10px */
grid-gap: 10px;
position: fixed;
}
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 25% 1fr; /* 1fr will be 75% - 10px */
grid-gap: 10px;
}
Others have pointed out that your grid doesn't take the grid-gap in to a count.
But the real issue to fix is that I found out your grid-template inside Features div that the one doesn't count the grid-gap.
If you still want to keep the grid-gap try lower the value of grid-template-columns to be 23% 75% respectively. So you allow that 10px from the grid-gap to take space.
.grid {
width: 100%;
height: 150px;
display: grid;
grid-template-columns: 23% 75%;
grid-gap: 10px;
}
Adjust the value as you see fit of course and make sure you take count of the grid-gap.
In This Code,I want to set the margin-top of .Login class ,smaller,although I set The margin-top ,to zero,but it is not set near to the top of page.What Can I do?why by setting the margin-top of this division ,this div does not set ,near the top of page?is other thing ok?the other elements works properly.
body {
margin: 0px;
direction: rtl;
}
#font-face {
src: url('../fonts/IRANSansWeb.eot'), url('../fonts/IRANSansWeb.woff'), url('../fonts/IRANSansWeb.woff2'), url('../fonts/IRANSansWeb.ttf');
font-family: "IranSans";
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 60px;
margin: 0px auto;
border: 2px solid black;
display: inline-block;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-bottom: 0px;
display: inline-block;
}
.Logo img {
width: 100%;
height: 100%;
}
.LogIn {
width: 140px;
height: 50px;
display: inline-block;
margin-right: 130px;
margin-top: 0px;
font-family: "IranSans";
border-radius: 5px;
background-color: #00d363;
}
.LogInA {
width: 100%;
height: 100%;
border: 5px;
color: #fff;
display: inline-block;
text-decoration: none;
text-align: center;
line-height: 50px;
}
.LogInA:hover {
border-radius: 5px;
background-color: #007bff;
color: #00d363;
border: 1px solid #00d363;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul>
</ul>
<div class="LogIn">
<a class="LogInA" href="#">ارسال شغل</a>
</div>
</nav>
</header>
</body>
Try adding display: flex; to your nav
You should use:
display:flex; justify-content: center; to your Nav and also you should remove height and use: flex-direction:column; in mobile version.