Web page size too wide - html
my homepage appears to be wider than necessary and I cant understand why -
HomePage
While my about page is just normal size --
About Page
What could be the culprit ?
Also, my header appears to be overlapping with the body in the about page, can anyone suggest some ideas as to why? I need to make it appear pretty much the same as the HomePage. Thank you!
Index html and CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Lobo Academy</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!------ Navigation ------->
<header>
<div class="header">
<div class="top-div">
<div class="top-div-left"> Get a free bjj class NOW
Call us at 456465464</div>
</div>
<div>
<nav><ul class="nav">
<li>Home</li>
<li>About</li>
<img id="logo" src="logo_header.webp">
<li>Contact</li>
<li>Store</li>
</ul>
</div> </nav>
</header></div>
<main>
<!----- Top Section - Triple Image ------->
<!---- Welcome Video ------>
<div class="welcome-video">
<video id="welcome-video-id" src="welcome_banner_video.mp4" height="500px" width="100%" autoplay muted></video>
</div>
<button class="top-button">New to Martial Arts? Click here</button>
<div class="welcome-text">
<p><h1>Welcome!</h1>
<main>We are the premiere Brazilian Jiu Jitsu training center in the Charlotte metro area. Head instructor, Lucas Lepri, is among the most decorated jiu jitsu athletes in the entire world, and we are part of the most dominant team in the history of the sport, Alliance.
We believe jiu jitsu is more than just a sport, self-defense system, or fitness program; it’s a lifestyle that improves the whole person. The physical, mental, and transcendent benefits of jiu jitsu should be accessible to everyone, from beginner to world-class competitor and any age, sex, or ethnicity.
We will help you achieve your goals, whether it is self defense, weight loss, confidence or to be a world champion. In the process, you will transform your life and become tougher, safer, fitter, & better.</main></p>
</div>
<div class="welcome-programs"><h2 id="prog-text">Programs and Classes</h2></div>
<section class="top-section">
<div class="left-wrap">
<div class= "left-wrap-inner">
<div class="top_left" ><img src="kids_left_banner.jpg" ></div>
<div class="top-left-text">
<h2 id="kids-martial-arts">Kids Martial Arts</h2>
<p>Learning a martial art, and Brazilian jiu jitsu in particular, is one of the best gifts you can provide a child. It provides character development and personal growth.
<br> Click to learn more.</p></div>
</div>
</div>
<div class ="center-wrap">
<div class="center-wrap-inner">
<div class="top_center" ><img src="trainer1.jpg"></div>
<div class="top-center-text">
<h2>Brazilian Jiu Jitsu</h2>
<p>Brazilian Jiu Jitsu is a sport, self-defense system, and a fitness program. It has proven to be the most practical and effective self-defense system in the world.</p></div>
</div>
</div>
<div class="right-wrap">
<div class="right-wrap-inner">
<div class="top_right"><img src="center.jpg" ></div>
<div class="top-right-text">
<h2>Weight Loss</h2>
<p>If you are looking to learn Brazilian Jiu Jitsu with maximum efficiency, private lessons will help reduce the amount of time it takes to reach key milestones.</p></div>
</div>
</div>
</section>
<!--------- End of Top section --------->
<!---------- Middle Section : Kids ---------->
<div class="mid-sec-header"><h2 id="coach-info">Alan Surmont</h2></div>
<section class="mid-section">
<div class="mid-wrap">
<div class="mid-section-inner-left">
<div class="kids-img"><img src="trainer1.jpg"></div>
</div>
<div class="mid-section-inner-right">
<div class="text-mid">
<button class="kid-button">Get a <strong>FREE</strong> Brazilian Jiu Jitsu Class here</button>
<p>Alan Surmont is the leading Israeli BJJ Champion, trained by his father Pascal Surmont, the former
Belgian Judo Sensei for over 9 years <br>
<br>
Currently training under Moshe Rubinov and is a brown belt under the Marcelo Garcia Association</p>
</div>
</div>
</div>
</section>
<!----------- End of Middle Section --------->
<!---------- Youtube testimonials -------->
<section class="lower-section-youtube">
<div class="vids">
<div class="youtube-left">
<h1 id="adult-testemonial">Adult class Testemonial</h1>
<iframe width="600" height="470" src="https://www.youtube.com/embed/vTFFUcppZSY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="youtube-right">
<h1 id="children-testemonial">Children Class Testemonial</h1>
<iframe width="600" height="600" src="https://www.youtube.com/embed/qmu47bjwyCw?start=30" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<!----------------- End of Youtube testimonials ------>
<!---------- Recent news section -------->
<section>
<div class="recent-posts">
<div class="recent-right"><a href=""><h1>New Location</h1>
<p>Our Lepri BJJ affiliated academy in Winston-Salem is now in a new location since January 2020. They are now at located at 1606 South Stratford Road, suite C, Winston-Salem, NC 27103. The head coach Pa ...</p>
</a></div>
<div class="recent-left"><h1>Recent <br> news</h1>
</div>
</div>
</section>
<!---------- Recent news section ------>
</main>
</body>
<footer>
<section class="footer">
<div class="footer-inner">
<div class="footer-left">
<ul>
<li>Sunday : Kids - 17:00-18:00; Seniors - 18:00-21:30</li>
<li>Monday : Kids - 16:15-19:00; Seniors - 19:00-21:30</li>
<li>Tuesday : Closed.</li>
<li>Wednesday : Kids - 17:00-19:00; Seniors - 19:00-21:30 </li>
<li>Thursday : Kids - 17:00-18:00; Seniors - 18:00-21:30 </li>
<li>Friday : Seniors - 08:30-22:00</li>
<li>Saturday: Open Mat - 20:00</li>
</ul>
</div>
<div class="footer-center">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
</div>
<div class="footer-right">
<ul>
<li>1loboteam#gmail.com</li>
<li>086760675</li>
<li>Hagdud Ha-Ivri 4, Gan Ha- ir , Floor -1</li>
<li><img src="facebook_logolink.png" alt="" height="50px" width="50px" >
<img src="instagram_logolink.png" alt="" height="50px" width="50px"></li>
</ul>
</div>
</div>
</section>
</footer>
</html>
a:link{
color: black;
}
a:visited{
color: white;
}
a:hover {
color: red;
}
.top-div{
width: 100%;
height: 6%;
background-color: rgb(0, 0, 0);
padding-top: 5px;
margin-bottom: 10px;
}
.top-div .top-div-left{
display: block;
width: 50%;
color: rgb(182, 182, 182);
font-size: large;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-left: 25px;
margin-top: 2px;
top: 50px;
}
.top-div .top-div-right{
display: inline-block;
width: 50%;
margin: 10px;
height: 30px;
width: 100%;
}
.top-div .top-div-right .FBNAV{
margin: 0;
border:2px solid red;
}
.nav {
display:inline-flex;
background: rgba(170, 3, 3, 0.151);
box-sizing: border-box;
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0px 0px 0px 650px;
float: left;
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
height: 200px;
}
.nav a{
text-decoration: none;
}
ul li a {
margin: 30px;
color: white;
font-size: large;
}
header {
margin: 0;
padding: 0;
width: 100%;
}
header ul {
list-style-type: none;
display: inline-flex;
align-items: center;
display: flex;
}
#logo {
align-content: center;
text-align: center;
padding: 50px 50px 50px 50px;
}
.social-top ul li{
display: inline-block;
float: right;
}
body{
background-color: black;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
.welcome-video{
width: 103%;
padding-top: 150px;
}
#welcome-video-id{
padding-top: 100px;
margin-bottom: 50px;
}
.top-button{
height: 50px;
width: 82%;
color:black;
background: rgb(182, 182, 182);
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: large;
margin-left: 150px;
margin-bottom: 150px;
}
.welcome-text{
color:white;
font-family: Arial, Helvetica, sans-serif;
margin-left: 150px;
width: 82%;
}
.welcome-programs{
display: inline-block;
color: black;
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0 15px 0;
margin-left: 150px;
margin-top: 150px;
margin-bottom: 0px;
height: 30px;
width: 82%;
text-align: left;
background: rgb(255, 255, 255);
text-emphasis: bold;
float: left;
}
#prog-text{
margin: 10px 0 20px 5px;
}
.top-section{
display:block;
position: relative;
background: black;
padding: 50px;
}
.left-wrap{display:block; float:left; width: 33%;}
.left-wrap .left-wrap-inner{
display: block;
padding: 50px 350px 50px 100px;
}
.left-wrap .left-wrap-inner .top_left{
display: block;
height: 400px;
width: 400px;
}
.left-wrap .left-wrap-inner .top-left-text{
color: rgb(182, 182, 182);
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
height: 200px;
width: 400px;
background: rgba(170, 3, 3, 0.151);
}
.left-wrap .left-wrap-inner .top-left-text h2{
padding-top: 20px;
}
.center-wrap{display: block; float: left; width: 33%;}
.center-wrap .center-wrap-inner{
display: block;
padding: 50px 350px 50px 100px;
}
.center-wrap .center-wrap-inner .top_center{
display: block;
height: 400px;
width: 400px;
}
.center-wrap .center-wrap-inner .top-center-text{
color: rgb(182, 182, 182);
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
height: 200px;
width: 400px;
background: rgba(170, 3, 3, 0.151);
}
.center-wrap .center-wrap-inner .top-center-text h2{
padding-top: 20px;
}
.right-wrap{display: block; float: left; width: 33%;}
.right-wrap .right-wrap-inner{
display: block;
padding: 50px 350px 50px 50px;
}
.right-wrap .right-wrap-inner .top_right {
display: block;
height: 400px;
width: 400px;
padding: 0px 0px 0px 20px;
}
.right-wrap .right-wrap-inner .top-right-text{
color: rgb(182, 182, 182);
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
height: 200px;
width: 400px;
background: rgba(170, 3, 3, 0.151);
margin-left: 20px;
}
.right-wrap .right-wrap-inner .top-right-text h2{
padding-top: 20px;
}
.mid-sec-header{
display: inline-block;
color: black;
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0 15px 0;
margin-top: 150px;
margin-left: 150px;
margin-bottom: 50px;
height: 30px;
width: 82%;
text-align: left;
background: rgb(255, 255, 255);
text-emphasis: bold;
float: left;
}
#coach-info{
margin: 10px 0 20px 5px;
}
.mid-section{
display: block;
float: left;
width: 100%;
height: 8%;
}
.mid-section .mid-section-inner-left{
display: block;
float: left;
width: 28%;
}
.mid-section .mid-section-inner-right{
display: block;
float: right;
width: 60%;
background: black;
font-family: Arial, Helvetica, sans-serif;
color: white;
margin-right:190px;
}
.mid-section .mid-section-inner-right .text-mid{
font-family: Arial, Helvetica, sans-serif;
}
.mid-section .kids-img{
display: block;
height: 400px;
width: 400px;
padding: 0px 350px 50px 90px;
margin-left: 60px;
}
.kid-button{
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
font-weight: bold;
height: 200px;
width: 150px;
float: right;
color: rgb(163, 8, 8);
background: white;
}
#adult-testemonial{
color: black;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-right: 150px;
vertical-align: top;
margin-top: 50px;
margin-bottom: 80px;
background-color: white;
}
#children-testemonial{
color: black;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-right: 150px;
margin-top: 100px;
width: 600px;
vertical-align: text-top;
background-color: white;
}
.lower-section-youtube{
display: block;
float: left;
width: 100%;
padding-bottom: 0px;
background-color: rgb(0, 0, 0);
}
.lower-section-youtube .vids .youtube-left {
display: block;
float: left;
width: 40%;
padding: 50px 0px 0px 150px;
margin: 0;
vertical-align: top;
}
.lower-section-youtube .vids .youtube-right {
display: block;
float: right;
width: 45%;
margin: 0;
vertical-align: top;
}
.recent-posts{
width: 82%;
display: inline-block;
margin-bottom: 200px;
margin-left: 160px;
}
.recent-posts .recent-left{
display: block;
width: 15%;
height: 200px;
text-align: center;
background: rgba(170, 3, 3, 0.151);
float: left;
vertical-align: middle;
}
.recent-posts .recent-right{
display: block;
float: right;
background: rgba(170, 3, 3, 0.151);
width: 84.5%;
height: 200px;
}
.recent-posts .recent-left h1{
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
vertical-align: text-top;
font-size: xx-large;
color: white;
}
.recent-posts .recent-right a{
text-decoration: none;
}
footer {
display: inline-block;
background: rgba(170, 3, 3, 0.151);
height: 200px;
width: 100%;
}
footer ul{
list-style-type: none;
color: white;
margin: 0px;
}
footer a{
text-decoration: none;
}
footer .footer-inner .footer-left{
display: inline-block;
width: 33%;
list-style: none;
}
footer .footer-inner .footer-left ul li {
padding: 5px;
vertical-align: middle;
}
footer .footer-inner .footer-center {
display: inline-block;
width: 33%;
vertical-align: top;
text-align: center;
margin-top: 5px;
}
footer .footer-inner .footer-center ul li {
padding: 12px;
vertical-align: middle;
}
footer .footer-inner .footer-right{
display: inline-block;
width: 33%;
vertical-align: top;
text-align: center;
}
footer .footer-inner .footer-right ul li {
padding: 13px;
vertical-align: middle;
}
About page HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css" type="text/css">
<title>About | Lobo Academy</title>
</head>
<body>
<header>
<div class="header">
<div class="top-div">
<div class="top-div-left"> Get a free bjj class NOW
Call us at 456465464</div>
</div>
<div>
<nav><ul class="nav">
<li>Home</li>
<li>About</li>
<img id="logo" src="logo_header.webp">
<li>Contact</li>
<li>Store</li>
</ul>
</div> </nav>
</header>
<main>
<img class="title-img" src="11924.jpg" alt="">
<div class="OurAcademy">
<h1>About Lobo Academy</h1>
<h2>Our Academy</h2>
<p>We are the premiere Brazilian Jiu Jitsu training center in the Charlotte metro area. Head instructor, Lucas Lepri, is among the most decorated jiu jitsu athletes in the entire world, and we are part of the most dominant team in the history of the sport, Alliance.
Our mission is to bring world-class instruction and passion for jiu jitsu to inspire people to be their best selves. We believe jiu jitsu is more than just a sport, self-defense system, or fitness program; it’s a lifestyle that improves the whole person. The physical, mental, and transcendent benefits of jiu jitsu should be accessible to everyone, from beginner to world-class competitor and any age, sex, or ethnicity.
We will help you achieve your goals, whether it is self defense, weight loss, confidence or to be a world champion. In the process, you will transform your life and become tougher, safer, fitter, and better.</p>
<hr>
<h2>Brazilian Jiu Jitsu makes you..</h2>
<p>
<strong> TOUGHER: </strong> Mentally and physically, it prepares you to overcome challenges in life and sport. <br>
<br>
<strong> SAFER: </strong> Widely considered the best self-defense system, it provides confidence in a world with the realities of bullies or attackers. <br>
<br>
<strong> FITTER:</strong> Building aerobic and anaerobic conditioning and incinerating calories, you will be exercising more often and with more intensity. Plus, it’s fun, dynamic, and even addictive. <br>
<br>
<strong> BETTER: </strong> Its life lessons and character-building qualities not only you a better athlete, but also a better father, employee, wife, leader, and friend. <br>
</p>
<hr>
<h2>About our facilities</h2>
<p>
We are located in the Galleria Village shopping center on the Southeast corner of Monroe Rd and Sardis Road North (behind McDonalds & Rite-Aid).
<br>
<br>
Our address is:
1636 Sardis Road North, Suite A-170
Charlotte, NC 28270
<br>
<br>
It is a totally renovated space with:
<br>
<ul>
<li>Nearly 4,000 sq feet</li>
<li>2,000 sq feet of mat space</li>
<li>Men & Women’s locker rooms with showers</li>
<li>Free WiFi</li>
<li>Lounge/ Seating area</li>
</ul>
</p>
<hr>
<h2>Children Program</h2>
<p>
Learning a martial art, and Brazilian jiu jitsu in particular, is one of the best gifts you can provide a child. It provides character development and personal growth that will impact every area of their life, for the rest of their life. It is a fun way for kids to get into fantastic shape, gain confidence, learn respect, improve discipline, and prevent bullying.
<br>
<img src="3.9.png" alt="" width="400px" height="400px">
Our kids program operates in a fun and nurturing environment, where kids flourish and learn important life lessons like:
<br>
<ul>
<li>Through self-discipline, commitment, and perseverance, you can accomplish anything.</li>
<li>Improving focus and concentration helps you ignore distractions and fully engage in lessons at school, in sport, and at home.</li>
<li>Patience pays off.</li>
<li>When you are healthy and fit, you feel better about yourself and are more confident.</li>
</ul>
<h2>Bullying</h2>
<p>
Our Kids Program will also empower your kids to prevent or discourage bullying without violence. Through appropriate and effective self-defense techniques, we instill the self-esteem and confidence needed to allow kids to defuse confrontations before they escalate, and how to protect and defend themselves in the event they are attacked. Bullying is the #1 social issue and epidemic in schools today, and it has ripple effects throughout our communities.
<br>
<ul>
<li>Every 7 minutes a child is bullied in the US</li>
<li>Every month, 3 million children miss school due to fear of bullying</li>
<li>90% of 4th through 8th graders report being victims of bullying</li>
<li>1 out of 10 students drop out of school due to repeated bullying</li>
<li>
70% of students believe schools respond poorly to bullying and that adult help is infrequent</li>
</ul>
</p>
<h2 id="victimchild"><strong>Dont let your child be the victim</strong></h2>
</p>
</div>
</main>
</body>
<footer>
<section class="footer">
<div class="footer-inner">
<div class="footer-left">
<ul>
<li>Sunday : Kids - 17:00-18:00; Seniors - 18:00-21:30</li>
<li>Monday : Kids - 16:15-19:00; Seniors - 19:00-21:30</li>
<li>Tuesday : Closed.</li>
<li>Wednesday : Kids - 17:00-19:00; Seniors - 19:00-21:30 </li>
<li>Thursday : Kids - 17:00-18:00; Seniors - 18:00-21:30 </li>
<li>Friday : Seniors - 08:30-22:00</li>
<li>Saturday: Open Mat - 20:00</li>
</ul>
</div>
<div class="footer-center">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Store</li>
</ul>
</div>
<div class="footer-right">
<ul>
<li>1loboteam#gmail.com</li>
<li>086760675</li>
<li>Hagdud Ha-Ivri 4, Gan Ha- ir , Floor -1</li>
<li><img src="facebook_logolink.png" alt="" height="50px" width="50px" >
<img src="instagram_logolink.png" alt="" height="50px" width="50px"></li>
</ul>
</div>
</div>
</section>
</footer>
</html>
<div>
<nav>
<ul class="nav">
<li>Home</li>
<li>About</li>
<img id="logo" src="logo_header.webp">
<li>Contact</li>
<li>Store</li>
</ul>
</div>
</nav>
You closed your div before closing the nav tag! try to review your HTML code there might be simple mistakes like this causing the problems.
Related
Elements overflowing from line
I believe my understanding of positioning is causing me multiple issues:
'Donate' in the navigation header keeps overflowing and not staying inline. I have experimented with display:inline-block, but it still is not working. I am trying to ensure that the navbar elements are responsive to different-sized pages and stay in the same line.
'Our work' section will not center in the middle of the page, even when I tried margin:auto
Unable to align the elements in the problem section correctly. I would like row2 to be 10% below row1, so it's like a 2x2 table configurement.
I've been struggling with this for a while, so if anyone has any ideas on how to solve any of these and suggestions moving forward - it would be well appreciated!
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#FFFFFF;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
}
.logo{
width:30%;
float: left;
text-align:left;
line-height: 122px;
}
nav{
float: center;
line-height: 122px;
}
nav a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 50%;
padding:10px;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%
}
.row2{
position: relative;
display: inline-block;
top:10%;
}
<body>
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%";>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section>
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the problem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
padding-top: 122px;
}
/* Header */
header {
position: fixed;
width: 100%;
height: 122px;
background: #FFFFFF;
z-index: 1;
text-align: center;
top: 0;
}
.wrapper {
max-width: 90%;
margin: 0 auto;
}
.logo {
width: 200px;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: right;
line-height: 122px;
width: calc(100% - 200px);
text-align: right;
}
nav a {
font-family: 'Ubuntu';
font-weight: 500;
font-size: calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color: #616161;
padding: 20px 20px;
}
.links:hover {
background: #F3EA65;
}
.CTA {
padding: 15px 50px;
border: none;
background: #F28A31;
border-radius: 15px;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
main,
section {
float: left;
width: 100%;
}
/*Our work*/
.ourworksec {
background: #fff;
padding: 100px 25px;
}
#ourwork {
width: 100%;
max-width: 620px;
margin: 0 auto;
text-align: center;
}
/*Problem section */
h2#theproblem {
padding: 20px;
}
#problembackground {
width: 100%;
float: left;
padding: 100px 20px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent {
position: relative;
}
.row1 {
position: relative;
display: inline-block;
padding: 20px;
float: left;
width: 50%;
}
.row2 {
position: relative;
float: left;
margin-top: 50px;
padding: 20px;
width: 50%;
}
#media only screen and (max-width: 1200px) {
.logo {
width: 80px;
}
nav {
width: calc(100% - 80px);
}
nav a {
padding: 15px 10px;
}
.CTA {
padding: 15px 30px;
}
}
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%" ;>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section class="ourworksec">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="theproblem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</section>
</main>
Regarding this one you simply don't have enough space at certain window widths to display them all, so you need to make their sizes responsive. #media queries at certain widths is one option. "Our work" is absolutely positioned, which messes with things like margin: 0 auto to center things. In general you use position: absolute WAY too often. Honestly you could avoid it all together looking at your page so far. position: absolute is a pain to work with when you come back to your project at a later stage too. Here your problem is that the third element is still on the same line because you set display: inline-block. You could wrap both rows each in another div (which are display: block by default). Also work with margin-bottom here in my opinion. You are making it way harder with the way you use several position properties.
Here: I removed the floats and used flexbox and grid
Quick note: This website is not responsive, so pls open it in the full window not hte mini window. If you want a responsive site, dang man, that's a big request
Code:
<body>
<style>
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#ffffff;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
text-align:left;
line-height: 100px;
height: fit-content;
display: inline-block;
width: fit-content;
padding: 30px;
margin: 0px;
}
.logo image {
width: 200px;
height: 200px;
}
.wrapper a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 300px;
padding:10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#work{
display: flex;
justify-content: center;
align-items: center ;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
#the-problem{
margin: auto;
width: 300px;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%;
margin: auto;
}
.row2{
position: relative;
display: inline-block;
top:10%;
margin: auto;
}
.problem{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
li{
list-style: none;
}
</style>
<header>
<ul class="wrapper">
<div class="logo">
<a href="....">
<img src="/logo.png" alt="Logo" width="25%";>
</a>
</div>
<li> <a class="links" href="#">about</a> </li>
<li> <a class="links" href="#">our team</a> </li>
<li> <a class="links" href="#">who we help</a> </li>
<li> <a class="links" href="#">get involved</a> </li>
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</ul>
</header>
<main>
<section id="work">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the-problem">the problem</h2><br>
<div class="problem">
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</div>
My a tag isnt jumping to specific part of page
I am new to coding and I am currently doing the product landing page project on FreeCodeCamp and I cannot figure out why my a tags are not jumping to a specific part of the page that I am trying to direct it to.
Here is a snippet of the HTML code of the list items on the page
#import 'https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap';
#import 'https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght#500&display=swap';
#header-img {
height: 70px;
padding-left: 15px;
padding-top: 10px;
filter: drop-shadow(0 0 0.75rem green);
}
#nav-bar {
font-family: 'Balsamiq Sans', sans-serif;
display: inline;
float: right;
padding-bottom: 100px;
padding-right: 40px;
margin: -15px;
}
li {
list-style: none;
display: inline;
margin: 40px;
text-align: center;
}
a {
color: #000000;
text-decoration: none;
}
p {
font-family: 'Yanone Kaffeesatz';
font-size: 33px;
text-align: left;
padding-left: 120px;
margin: -33px;
opacity: 90%;
}
h1 {
font-family: 'Balsamiq Sans';
font-size: 60px;
text-align: center;
padding-top: 120px;
padding-right: 650px;
}
.body-img {
height: 500px;
position: relative;
top: -345px;
float: right;
}
h2 {
font-family: 'Balsamiq Sans', sans-serif;
text-align: center;
font-size: 20px;
position: relative;
bottom: 30px;
}
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" alt="Calming Corner logo" src="https://image.flaticon.com/icons/png/512/1491/1491200.png"></div>
<p> Calming Corner</p>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#Benefits">Benefits</a></li>
<li><a class="nav-link" href="#Features">Features</a></li>
<li><a class="nav-link" href="#Pricing">Pricing</a></li>
</nav>
</ul>
</header>
<section id="title">
<h1>Brilliant things<br> happen in a calm mind...</h1>
<div class="description">
<img id="body-img" class="body-img" src="https://i.pinimg.com/originals/14/04/bc/1404bc0062d9528d6af29e699a4b6fc2.gif">
<h2> Remember the illuminating sun... <br>it may, at times, be obscured by clouds, but it is always there.</h2>
</div>
<div class="container">
<section id="Benefits">
<h3> Meditation exercises for all ages</h3>
<p> After choosing a subscription plan you will receive access to 100s of mindfulness exercises geared towards all age groups and other features based on the subscription plan that you choose.</p>
</div>
I have no clue why it isnt working, I've tried many things throughout other threads asking the same question but it could be an issue specific to parts of my code that may be interfering. But I am not entirely sure. Any guidance would be appreciated!
There are several things going wrong here.
The first one being not closing your <section> tags. a <section> tag should always be closed!
<section>
<p>Test</p>
</section>
The second one is that you are nesting your html elements in the wrong way. In the code you provided, you where opening a <div> tag before your <section> tag and closing it after your <section> tag. This is not valid and can lead to your code breaking down!
<section>
<div>
<p>Test</p>
</div>
</section>
The last one is closing your <ul> tag after closing your <nav> tag. Like i said, this is not valid and can lead to your code not working as expected!
<nav>
<ul>
<li><a>Test</a></li>
</ul>
</nav>
The snippet below has a working example. pressing the Benefits button should redirect you to the Benefits section.
#import 'https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap';
#import 'https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght#500&display=swap';
#header-img {
height: 70px;
padding-left: 15px;
padding-top: 10px;
filter: drop-shadow(0 0 0.75rem green);
}
#nav-bar {
font-family: 'Balsamiq Sans', sans-serif;
display: inline;
float: right;
padding-bottom: 100px;
padding-right: 40px;
margin: -15px;
text-align: center;
}
li {
list-style: none;
display: inline;
margin: 30px;
text-align: center;
}
a {
color: #000000;
text-decoration: none;
}
p {
font-family: 'Yanone Kaffeesatz';
font-size: 20px;
text-align: left;
padding-left: 120px;
margin: -33px;
opacity: 90%;
}
h1 {
font-family: 'Balsamiq Sans';
font-size: 60px;
text-align: center;
padding-top: 120px;
padding-right: 650px;
}
.body-img {
height: 500px;
position: relative;
top: -345px;
float: right;
}
h2 {
font-family: 'Balsamiq Sans', sans-serif;
text-align: center;
font-size: 20px;
position: relative;
bottom: 30px;
}
h3{
position: relative;
bottom: 30px;
}
.container{
text-align: center;
}
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" alt="Calming Corner logo" src="https://image.flaticon.com/icons/png/512/1491/1491200.png"></div>
<p class="logo">Calming Corner</p>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#Benefits">Benefits</a></li>
<li><a class="nav-link" href="#Features">Features</a></li>
<li><a class="nav-link" href="#Pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="title">
<h1>Brilliant things<br> happen in a calm mind...</h1>
<div class="description">
<img id="body-img" class="body-img" src="https://i.pinimg.com/originals/14/04/bc/1404bc0062d9528d6af29e699a4b6fc2.gif">
<h2> Remember the illuminating sun... <br>it may, at times, be obscured by clouds, but it is always there.</h2>
</div>
<section id="Benefits">
<div class="container">
<h3> Meditation exercises for all ages</h3>
<p> After choosing a subscription plan you will receive access to 100s of mindfulness exercises geared towards all age groups and other features based on the subscription plan that you choose.</p>
</div>
</section>
</section>
Cant get nav bar to hide content when I scroll up
I am building a landing page and am wondering why I cant get my navbar to work properly. I formatted it right, but one issue I am running into is when I scroll down the text goes through the nav bar/header when it should be going behind it or not visible when you scroll down. Anybody know a way that I can fix this issue? Here's the code that I have:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanderlay Industries</title>
</head>
<body>
<header id="header">
<img id="header-img" src=http://nextarts.info/wp-content/uploads/art-vandelay-06-quotplaying-with-powerquot-art-vandelay.jpg alt="Vanderlay President">
<div>
<h1>Vandelay Industries, Inc.</h1>
<p id="subtitle">Importer/Exporter of Fine Latex Goods</p>
</div>
<div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#demonstration">Demonstration</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</div>
</header>
<div id="features">
<h2 class="title">Features</h2>
<div id="fine">
<h3 class="title">Fine</h3>
<img id="fine-image" src="https://f4.bcbits.com/img/0007459691_10.jpg" alt="Fancy Fine Lettering">
<p class="description">What we sell is always of the finest quality. Founded on February 12, 1992; no higher standard of fine has been met. Whether it be the local fire department or public water supply, we've set the bar for the finest. With Vandelay, you'll always be
enjoying the finer things</p>
</div>
<div id="Latex">
<h3 class="title">Latex</h3>
<div>
<img id="latex-image" src="http://mjtrends.b-cdn.net/images/product/963/pearlsheen-metallic-blue-latex-sheeting_370x280.jpg" alt="Latex Image">
</div>
<p class= "description">Our latex is so strong you couldn't even fabricate it. Or make a ficticious firm about it. That's how authentic our latex is. Try it today.</p>
</div>
<div id="Goods">
<h3 class="title">Goods</h3>
<img id="goods-image" src="http://wefirstbranding.com/wp-content/uploads/2010/09/virtual-goods1.jpg" alt="Pile of Goods">
<p>If you got the goods, you got the goods. And we got em. Lots of em. Whether it be potato chips or diapers, the goods at our firm are plentiful.</p>
</div>
</div>
<br><br><br>
<div id="demonstration">
<h2>Latex Demonstration</h2>
<iframe id="video" width="420" height="315" src="https://www.youtube.com/embed/p8qnYz5jHag"></iframe>
<p>Take the pleasure of viewing a sublime presentation of latex</p>
</div>
<div id="pricing">
<div class="productLabel">
<h4>Latex 1</h4>
</div>
<div class="price">
<h3>$1,000</h3>
Our base model. Very popular option.
</div>
<div class="productLabel">
<h4>Latex 2</h4>
</div>
<div class="price">
<h3>$5,000</h3>
A more luxury material from the far land of Bosco.
</div>
<div class="productLabel">
<h4>Latex 3</h4>
</div>
<div class="price">
<h3>$10,000</h3>
The finest we offer, genetically superior good through marine biology.
</div>
</div>
<section>
<p>For more information, please enter your email below. We will be happy to send you a free latex demonstration!</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for=email>Enter your email address:</label>
<input id="email" type=email name="email" required>
<input id="submit" type="submit" value="Submit">
</form>
</section>
<footer>
© Vandelay Industries Inc.
</footer>
CSS:
body {
background: rgba(0, 0, 128, 90%);
color: #f7ed36;
}
#nav-bar {
color: #f7ed36;
display: flex;
position: relative;
flex-direction: row;
}
ul {
width: 35vw;
display: flex;
flex-direction: row;
color: #f7ed36;
position: relative;
left: 250px;
top: 25px;
}
header {
position: fixed;
display: flex;
top: 0px;
width: 100%;
height: 90px;
background: rgba(0, 0, 128, 90%);
}
#subtitle {
font-style: italic;
position: relative;
bottom: 17px;
left: 5px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
display: block;
color: white;
text-align: right;
padding: 10px 20px 10px;
text-decoration: none;
}
.title {
text-align: center;
}
#header-img {
float: left;
width: 80px;
height: 80px;
}
.description {
align: baseline;
text-align: justify;
display: inline;
margin-left: ;
}
#features{
position: relative;
top: 100px;
}
#fine-image {
width: 10%;
height: 10%;
margin: 10px;
}
#latex-image {
width: 10%;
height: 10%;
position: relative;
margin: 10px;
}
#goods-image {
width: 10%;
height: 10%;
margin: 10px;
}
Any thoughts you have is appreciated. I'm sure its pretty common thing to fix since a lot of pages online have it. Thanks!
header {
position: fixed;
display: flex;
top: 0px;
width: 100%;
height: 90px;
background: rgba(0, 0, 128, 90%);
z-index: 2
}
Looks like header would be a sticky header.
If you need header layer to be in front of the page, must use z-index to order the layer.
Give this a Try!
header {
position: fixed;
display: flex;
top: 0px;
width: 100%;
height: 90px;
background: rgba(0, 0, 128, 90%);
background-color: white;
z-index: 999
}
All in that Z-index
How to display two elements <h> and <p> next to each other without alignment glitch?
I'm trying to build a CV using HTML & CSS as my first little project.
I'm having an issue getting the some very basic alignment sorted but I can't (for the life of me) work out why this slight displacement is happening. What am I miss guys?
The displacement is how the UL division sits next to the H3 division of 'skills'
Some direction and advise would be great! Thanks, and I hope I've formatted this post correctly.
html {
margin: 48px 48px;
box-sizing: border-box;
}
body {
font-family: "calibri";
max-width: 980px;
}
img {
height: 300px;
width: 300px;
border-radius: 50%;
margin: 4px 4px 4px 4px;
float: right;
z-index: 2;
}
.name {
line-height: 1em;
border-bottom: solid 2px black;
position: relative;
z-index: 1;
}
.contact p {
font-weight: 250;
width: 300px;
height: 35px;
}
.contact strong {
font-weight: 600;
}
.header {
width: 175px;
height: 200px;
display: inline-block;
text-align: right;
background-color: antiquewhite;
}
.skills {
width: 475px;
height: 200px;
background-color: beige;
display: inline-block;
}
.skills ul {
columns: 2;
list-style-position: inside;
}
.experience {
width: 475px;
height: 200px;
background-color: beige;
}
<div class="name">
<h1>Name</h1>
</div>
<div class="contact">
<p><strong>Email</strong>: blabla#gmail.com<br><strong>No</strong>: 0000 000 000</p>
</div>
<!-- Bio section -->
<div class="bio">
<p>I am a creative, determined and hardworking individual looking to secure a full-time position in a role that promotes development and growth. I love engaging with projects and working to a high standard, I have been effective in previous media related
roles in tasks such as content creation and article publication.</p>
</div>
<!-- Skills -->
<h3 class="header">skills</h3>
<div class="skills">
<ul>
<li>Content Creation</li>
<li>Social Media</li>
<li>Document Publication</li>
<li>Document Editing</li>
<li>HTML/CSS</li>
<li>Customer Service</li>
<li>Blog Writing</li>
</ul>
</div>
<!-- Experience -->
<h3 class="header">Experience</h3>
<!-- VANEL -->
<div class="experience">
<h4>Communication, Digital Media and Youth Development Internship</h4>
<p>VANEL (Voluntary Action North East Lincolnshire)</p>
<p>VANEL are an independent organisation that support the development, infrastructure and expansion of non-profits in the local area.</p>
<div class="experience-list">
<ul>
<li>Created and circulated editorial work for the local third-sector industry in Lincolnshire.</li>
<li>Developed a local marketing and social media plan for a community welfare campaign.</li>
<li>Worked directly with younger people to strengthen their relationship with the third-sector.</li>
<li>Lead a video project with a group of students from a local college, I liaised with tutors and small charity owners, bringing the two together.</li>
<li>Social critique and development of an area suffering from a lack of youth support.</li>
</ul>
</div>
put the div and h3 in a wrapper div: <div style="display:flex; flex-wrap:nowrap;"> <h3 class="header">skills</h3> <div class="skills"> <ul> <li>Content Creation</li> <li>Social Media</li> <li>Document Publication</li> <li>Document Editing</li> <li>HTML/CSS</li> <li>Customer Service</li> <li>Blog Writing</li> </ul> </div> </div>
You need to set the following on your header class:
vertical-align: top;
margin-top: 0;
This is because the default value of vertical-align is baseline for inline-block elements
html {
margin: 48px 48px;
box-sizing: border-box;
}
body {
font-family: "calibri";
max-width: 980px;
}
img {
height: 300px;
width: 300px;
border-radius: 50%;
margin: 4px 4px 4px 4px;
float: right;
z-index: 2;
}
.name {
line-height: 1em;
border-bottom: solid 2px black;
position: relative;
z-index: 1;
}
.contact p {
font-weight: 250;
width: 300px;
height: 35px;
}
.contact strong {
font-weight: 600;
}
.header {
width: 175px;
height: 200px;
display: inline-block;
text-align: right;
background-color: antiquewhite;
vertical-align: top;
margin-top: 0;
}
.skills {
width: 475px;
height: 200px;
background-color: beige;
display: inline-block;
}
.skills ul {
columns: 2;
list-style-position: inside;
}
.experience {
width: 475px;
height: 200px;
background-color: beige;
}
<div class="name">
<h1>Name</h1>
</div>
<div class="contact">
<p><strong>Email</strong>: blabla#gmail.com<br><strong>No</strong>: 0000 000 000</p>
</div>
<!-- Bio section -->
<div class="bio">
<p>I am a creative, determined and hardworking individual looking to secure a full-time position in a role that promotes development and growth. I love engaging with projects and working to a high standard, I have been effective in previous media related roles in tasks such as content creation and article publication.</p>
</div>
<!-- Skills -->
<h3 class="header">skills</h3>
<div class="skills">
<ul>
<li>Content Creation</li>
<li>Social Media</li>
<li>Document Publication</li>
<li>Document Editing</li>
<li>HTML/CSS</li>
<li>Customer Service</li>
<li>Blog Writing</li>
</ul>
</div>
How to remove extra border in Html/Css
Here my Html and Css (messy I am still working on it) on my final result I have an extra border and I cannot move my < aside> on the right of my < mainpart>.
I am struggling to have the results I wish, /I think I have a layout problem but I could not find anything very obvious at my level...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome Bootsworld</title>
<link rel="stylesheet" type="text/css" href="bootsworld.css">
</head>
<body>
<div id="page" class="divborder">
<header id="pageheader">
<nav id="primarynav">
<ul>
<li>Site map</li>
<li>Privacy policy</li>
<li>Accessibility</li>
</ul>
</nav>
<nav id="title">
<h1>BOOT</h1><h2>WORLD</h2>
</nav>
<nav id="secondnav">
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>NEWS</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
<li>SUBSCRIBE</li>
</ul>
</nav>
</header>
<div id="introduction" class="divborder">
<img src="boots.png" width="500" height="400" alt="boots"/>
<h2>Welcome to boot world</h2>
<p class="intro">BootWorld is the largest online footwear retailer in the UK.Our shop always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not send us a message.</p>
</div>
<div id="mainpart" class="divborder">
<h2>NEW IN THE SHOP</h2>
<article class= "news">
<h3>CLASSIC COWBOY BOOTS</h3>
<p>Stand out from the crowd in a pair of classic cowboy boots. Available for Ladies and Gents from only <mark class="black">£49.99</mark></p>
<h3>MILITARY BOOTS</h3>
<p>Hard-wearing Men's military boots, gsuaranteed to withstand all weathers. From only <mark class="black">£69.99</mark></p>
<h3>ROMAN SANDALS</h3>
<p>Get ready for summer with some stylish roman sandals. From only <mark class="black">£39.99</mark></p>
<h3>OFFICE SHOES</h3>
<p>You don't have to wear boring shoes to the office. Check out our new stock of Ladies and Gents fashionable office shoes from only <mark class="black">£44.99</mark></p>
</article>
<aside id="latestnews">
<h3>Latest News</h3>
<p>Our seasonal sale has kicked off again! make sure you stop by our online shop to pick up a bargain.</p>
<footer>Posted by: Joe</footer>
</aside>
<aside id="suscribe">
<h3>Subscribe</h3>
<p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
<form>
<fieldset>
<legend>SIGN UP NOW!</legend>
<p>
<label for="yourname">Your name</label><br/>
<input type="text" name="yourname" id="yourname"size="20"/>
</p>
<p>
<label for="emailaddress">email address</label><br/>
<input type="text" name="emailaddress" id="emailaddress"size="20"/>
</p>
<button onclick="myFunction()">Sign Up</button>
</fieldset>
</form>
</aside>
</div>
<footer id="pagefooter">
<h3>OUR ADDRESS:</h3>
<p>Malet Street,<br/> London, WC1E 7HX</p>
</footer>
</div>
</body>
</html>
And my css:
body{
width: 90%;
margin: auto;
}
h1,h2{
display: inline;
color: #016008;
}
h1{
font-size: 60px;
}
h2{
font-size: 40px;
}
li{
display: inline;
}
aside{
color:#016008;
text-decoration: none;
background-color: #dddddd;
}
form{
background-color: white;
margin: 0px;
}
legend{
color: #3e3e3e;
font-weight: bold;
}
#primarynav ul{
color: #016008;
text-align: right;
}
#secondnav{
display: block;
text-align: justify;
}
#mainpart h2{
color: #3e3e3e;
}
#latestnews h3{
color: #3e3e3e;
}
#latestnews footer{
float: right;
color: #3e3e3e;
}
#latestnews p{
text-decoration: underline;
}
#suscribe h3{
color: #3e3e3e;
}
mainpart{
float: left;
}
#pagefooter{
background-color: #dddddd;
color:#3e3e3e;
}
img{
border:1px solid grey;
float: left;
}
#introduction{
float: right;
}
introduction.h2{
color: red;
}
.news{
background-color: #dddddd;
width: 65%;
padding:2px 7px 4px 7px;
margin: 2px 2px 2px 2px;
text-align: justify;
color:#016008;
}
.divborder{
border: 1px solid grey;
}
div{
text-align: justify;
padding:2px 7px 4px 7px;
margin: 10px;
}
#pagefooter{
padding:2px 7px 4px 7px;
}
#latestnews{
display: inline;
float: right;
width:30%;
}
#suscribe{
display: inline-block;
width:30%;
float: right;
}
introduction p{
float: right;
overflow: auto;
}
aside{
float: right;
}
mark.black{
color: black;
background: none;
font-weight: bold;
}
Any thoughts?
J.
Try to use box-sizing: border-box;
#introduction's top margin is making a space between its top border and the top of mainpart. A quick fix would be to set margin-top: 0 on #introduction. JSFiddle