I'm building a little play HTML page as I teach myself how to code. I've watched several walkthrough videos and want to incorporate what I've learned without watching the video so that it sticks better. Here is an image of what I'm dealing with.
I want these three sections, 'Learn HTML', 'Learn CSS3', and 'Learn Javascript' to be centered on the page. I created a <section ID=""> tag to center everything on the page under the showcase and 3 separate <div class=""> for each box.
My problem is two-fold, not only are the border boxes not centering on the page, but the boxes aren't even appearing.
Here's the code...
body {
background-color: #FFFAF0;
color: black;
font-family: garamond;
font-weight: normal;
margin: 0;
line-height: 1.6em;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#topheader {
background-color: #228B22;
color: white;
margin: auto;
padding: 15px;
text-align: center;
}
#navbar {
background-color: black;
color: white;
}
#navbar ul {
padding: 0;
list-style: none;
}
#navbar li {
display: inline;
margin: auto;
padding-right: 50px;
text-align: center;
}
#navbar a {
color: white;
text-decoration: none;
}
#showcase {
background-image: url('../coding/codage.png');
background-position: center right;
min-height: 300px;
margin-bottom: 30px;
text-align: center;
color: white;
}
#main {
width: 33.3% padding:10px;
margin: auto;
}
.top {
float: left;
border: 3px black;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ByMyself.css">
<meta charset="utf-8">
<title>How To Build A Website By Yourself</title>
</head>
<body>
<header id="topheader">
<div class="container">
<h1>Learning HTML5 and CSS3</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>Learning HTML5</li>
<li>Learning CSS3</li>
<li>About Us</li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container">
<h1>How to learn how to build a website from scratch! Code The Future!
</h1>
</div>
</section>
<div class="clr"></div>
<section id="main">
<div class="top">
<h2>Learn HTML5</h2>
<ul>
<ol>Step 1 - Watch Tutorials</ol>
<ol>Step 2 - Take Notes</ol>
<ol>Step 3 - Repeat Until It Sinks In</ol>
</ul>
</div>
<div class="top">
<h2>Learn CSS3</h2>
<ul>
<ol>Step 1 - Watch Tutorials</ol>
<ol>Step 2 - Take Notes</ol>
<ol>Step 3 - Repeat Until It Sinks In</ol>
</ul>
</div>
<div class="top">
<h2>Learn Javascript</h2>
<ul>
<ol>Step 1 - Watch Tutorials</ol>
<ol>Step 2 - Take Notes</ol>
<ol>Step 3 - Repeat Until It Sinks In</ol>
</ul>
</div>
</section>
</body>
</html>
There are a few problems:
FLOAT: What you need to do is apply both a width (of about a third) and a margin to your three .top elements. Note that the width should take the margins into consideration, which can be achieved by subtracting them with the calc() function. I've gone with margin: 0 20px; for a horziontal marign of20px and no vertical margin, along with width: calc(33% - 40px);, which takes both the left and right margins into consideration before finding 33% of the available width.
BORDER: You've applied a rule of border: 3px black, which is almost right; you're looking for border: 3px solid black; the solid is critical!
In addition to this, your 'list items' are <ol>, which stands for ordered list. You've essentially got multiple ordered lists inside of an unordered list. These should be list items (<li>) instead, inside of <ol> items, which would look like:
<ol>
<li>Step 1 - Watch Tutorials</li>
<li>Step 2 - Take Notes</li>
<li>Step 3 - Repeat Until It Sinks In</li>
</ol>
However, having said that, you'd benefit from simple <div> tags instead, as each point wants to be on its own line, and you're adding your own "Step 1" prefixes.
This can be seen in the following (click Run Code Snippet then Full Page):
body {
background-color: #FFFAF0;
color: black;
font-family: garamond;
font-weight: normal;
margin: 0;
line-height: 1.6em;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#topheader {
background-color: #228B22;
color: white;
margin: auto;
padding: 15px;
text-align: center;
}
#navbar {
background-color: black;
color: white;
}
#navbar ul {
padding: 0;
list-style: none;
}
#navbar li {
display: inline;
margin: auto;
padding-right: 50px;
text-align: center;
}
#navbar a {
color: white;
text-decoration: none;
}
#showcase {
background-image: url('../coding/codage.png');
background-position: center right;
min-height: 300px;
margin-bottom: 30px;
text-align: center;
color: white;
}
#main {
width: 33.3% padding:10px;
margin: auto;
}
.top {
float: left;
border: 3px solid black;
box-sizing: border-box;
text-align: center;
margin: 0 20px;
width: calc(33% - 40px);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ByMyself.css">
<meta charset="utf-8">
<title>How To Build A Website By Yourself</title>
</head>
<body>
<header id="topheader">
<div class="container">
<h1>Learning HTML5 and CSS3</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li>Home</li>
<li>Learning HTML5</li>
<li>Learning CSS3</li>
<li>About Us</li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container">
<h1>How to learn how to build a website from scratch! Code The Future!
</h1>
</div>
</section>
<div class="clr"></div>
<section id="main">
<div class="top">
<h2>Learn HTML5</h2>
<div>Step 1 - Watch Tutorials</div>
<div>Step 2 - Take Notes</div>
<div>Step 3 - Repeat Until It Sinks In</div>
</div>
<div class="top">
<h2>Learn CSS3</h2>
<div>Step 1 - Watch Tutorials</div>
<div>Step 2 - Take Notes</div>
<div>Step 3 - Repeat Until It Sinks In</div>
</div>
<div class="top">
<h2>Learn Javascript</h2>
<div>Step 1 - Watch Tutorials</div>
<div>Step 2 - Take Notes</div>
<div>Step 3 - Repeat Until It Sinks In</div>
</div>
</section>
</body>
</html>
Hope this helps!
Related
I am using flexbox and the footer is outside of flexbox contents.
my issue is the footer is in the middle of flex items and is not setting on the bottom. I don't know what I did wrong. everything I've tried either hasn't worked so far.
any help will be apperiaciate.thanks
here is my full code : https://codepen.io/ROY1319/project/editor/ANyGyr
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #9bf6ff;
font-family: 'Oswald', sans-serif;
width: 100%;
}
#headerExperience {
line-height: 200px;
font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: khaki;
background-color: steelblue;
background-image: url("images/Experience\ background\ imagee.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
margin-bottom: 25px;
}
.container {
display: flex;
height: 100vh;
flex-direction: column;
gap: 25px;
align-items: center;
margin-bottom: 25px;
}
.century,
.LNA {
border: 2px solid black;
font-size: 16px;
background-color: #E5ECE9;
display: block;
}
.century,
.LNA {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 0 15OPX
}
.headers,
.tasks {
display: block;
align-content: space-around;
}
/* nav and ul */
ul {
overflow: hidden;
display: inline-block;
/* how do I set the vertical spacing between the list items? */
}
li {
margin: 10px 0;
letter-spacing: 2px;
}
footer {
background-color: orangered;
padding: 0 1rem;
bottom: 0;
width: 100%;
height: 2.5rem;
}
footer .foot {
display: flex;
justify-content: space-between;
align-items: center;
color: red;
padding: 5em 0;
}
footer ul {
list-style: none;
margin: 0;
}
footer li {
display: inline-block;
padding: 0.75rem 1.25rem;
}
<!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" />
<link rel="stylesheet" href="experience.css" />
<title>Experience</title>
</head>
<body>
<!--Header-->
<div id="headerExperience">
<h1>Experience</h1>
</div>
<!--container-->
<div class="container">
<!-- Century-->
<div class="century">
<div class="media">
<img src="imag logo.png" alt="CenturyImage" />
<figcaption>Century Logo</figcaption>
</div>
<div class="headers">
<h2>ddddd</h2>
<h3>IT student Worker</h3>
<h4>Whie MN,2018</h4>
</div>
<div class="tasks">
<h5>TASKS</h5>
<ul>
<li>
1.Instructed users over the phone by describing what to look for and steps to take.
</li>
<li>
2.Adapted to change and learn new version of Microsoft quickly.
</li>
<li>
3.Assisted department staff with assigned tasks including technology equipment prep, filling, shredding.
</li>
<li>4.Created appropriate technical documents.</li>
</ul>
</div>
</div>
<!-- lNA-->
<div class="LNA">
<div class="media">
<img src="images/logo.jpg" alt="logo" />
<figcaption>LNA Logo</figcaption>
</div>
<div class="headers">
<h2>LNA</h2>
<h3>Digital Support Specialist</h3>
<h4>Minneapolis MN,2021-Present</h4>
</div>
<div class="tasks">
<h5>Tasks</h5>
<ul>
<li>1.Update and manage a simple program website.</li>
<li>2.Help participants access free and safe internet service.</li>
<li>
3.Encrypting hard drives of participants' laptops using bit Locker built-in window OS.
</li>
<li>
4.Distribute free laptops and tech accessories to participants.
</li>
<li>5.Lead small student groups practicing computer skills.</li>
</ul>
</div>
</div>
</div>
<footer> // footer started here
<div class="foot">
<div class="copyright">© A Team</div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>Experience</li>
<li>Achievemants</li>
<li>About</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
I am currently working on my navigation bar on VScode. I want it to be on the right top corner(where I am going to place my logo) and aligned side by side. but my code does not seem to be working.
here is my codepen link:
https://codepen.io/Zeynepbozdayi/pen/eYgOmPo
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#header {
position: fixed;
background-color: white;
width: 100%;
height: 80px;
top: 0px;
left: 0px;
/*z-index: 2;*/
}
.nav {
float: right;
font-family: 'Lexend Mega', sans-serif;
text-transform: uppercase;
}
.nav ul {
padding: 0;
margin: 0;
}
.nav ul li {
float: left;
list-style-type: none;
border: 1px solid #eee;
}
.nav ul li a {
background-color: black;
color: white;
padding: 10px;
display: block;
text-decoration: none;
}
.nav ul li a:hover {
background-color: white;
color: black;
}
#branding {
width: 200px;
height: 50px;
float: left;
background: url('http://lorempixel.com/output/business-q-g-301-63-4.jpg') no-repeat center center;
background-size: 200px;
}
#minimenu {
display: none;
}
.section:nth-child(even) {
background-color: #dddddd;
}
.section {
min-height: 1000px;
padding-top: 100px;
overflow: hidden;
/*position: relative;*/
font-family: 'Lexend Mega', sans-serif;
color: red;
section article {
padding: 15px;
background-color: rgba(255, 255, 255, 0.8);
}
#about {
background: url('http://lorempixel.com/output/city-q-c-1460-1010-5.jpg') no-repeat;
background-size: cover;
}
#products {
background: url('http://lorempixel.com/output/business-q-c-1460-1010-8.jpg') no-repeat;
background-size: cover;
}
<header id="header">
<div id="menu">
<div id="branding"><img src="http://lorempixel.com/output/business-q-g-301-63-4.jpg"></div>
<div id="minimenu"><i class="fa fa-bars"></i></div>
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Redesign</li>
<li>From You</li>
</ul>
</nav>
</div>
</header>
<div id="container">
<!-- This is the Home section -->
<section id="home" class="section">
<header>
<h1>CREATIVE</h1>
<h1>CLOTHING</h1>
<h1>DESIGN</h1>
<h1>with Zebo’s</h1>
</header>
<article>
<p>Reuse, reduce, recycle- it generates less overall waste,
it’s free, and your favorite pieces of clothes will last longer. In a few easy steps
you can redesign your own clothes in fashionable ways.
<strong><p>Here is how:</p> </strong>
</article>
</section>
<!-- This is the About section -->
<section id="about" class="section">
<header>
<h2>ABOUT</h2></header>
<article>
<p>
It is very important to recycle our unused or overused clothes. Because textile and fashion industries
are not as innocent as they seem to be. The fashion indusrty is the second biggest polluter
in the world after the oil industry. Process of cloth making includes high rates of water pollution,
water consumption, microfibers in the ocean, waste accumulations, greenhouse gas emission and many
more impacts to the world.</p>
<p>
Our mission is to show people how to bring their old clothes or shoes back to life in a fashionable
way and embrace them to be considered when buying or giving away their clothes.
</p>
</article>
</section>
<!-- This is the Product section -->
<section id="Redesign" class="section">
<header>
<h2>LET’S REDESIGN A PAIR OF SHOES</h2></header>
<article>
<p>This section will show you a tutorial for how to redesign your high top Converse shoes.</p>
<p>Lets start:</p>
<h3>STEP#1: FIND A HIGH TOP CONVERSE TO REPAIR</h3>
</article>
</section>
<!-- This is the Contact section -->
<section id="From You" class="section">
<header>
<h2>From You</h2>
</header>
</section>
</div>
Your CSS has .nav (which selects <anything class="nav"> but your HTML has <nav id="nav">.
You need to change your CSS to use #nav.
or nav (if you will only ever have a single <nav> element on your page.
or nav#nav (if you want to be redundant).
My solution is posted below. I've also made the following changes:
Making your selectors more consistent (indentation, using the child-selector > instead of the descendant selector where appropriate).
Use a single <h1>, with <br /> for line-breaks instead of separate <h1> elements.
Removing all float: rules and instead use display: flex; for only nav > ul.
Use position: sticky instead of position: absolute for #header.
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
#import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');
#header {
position: -webkit-sticky;
position: sticky;
background-color: white;
box-sizing: border-box;
height: 80px;
top: 0;
right: 0;
z-index: 2;
}
#nav {
font-family: 'Lexend Mega', sans-serif;
text-transform: uppercase;
}
#nav ul {
padding: 0;
margin: 0;
display: flex;
}
#nav ul > li {
list-style-type: none;
border: 1px solid #eee;
}
#nav ul > li > a {
background-color: black;
color: white;
padding: 10px;
display: block;
text-decoration: none;
}
#nav ul li a:hover {
background-color: white;
color: black;
}
#branding {
width: 200px;
height: 50px;
float: left;
background: url('http://lorempixel.com/output/business-q-g-301-63-4.jpg') no-repeat center center;
background-size: 200px;
}
#minimenu {
display: none;
}
.section:nth-child(even) {
background-color: #dddddd;
}
.section {
min-height: 1000px;
padding-top: 100px;
overflow: hidden;
font-family: 'Lexend Mega', sans-serif;
color: red;
.section article {
padding: 15px;
background-color: rgba(255, 255, 255, 0.8);
}
#about {
background: url('http://lorempixel.com/output/city-q-c-1460-1010-5.jpg') no-repeat;
background-size: cover;
}
#products {
background: url('http://lorempixel.com/output/business-q-c-1460-1010-8.jpg') no-repeat;
background-size: cover;
}
<header id="header">
<div id="menu">
<div id="branding"><img src="http://lorempixel.com/output/business-q-g-301-63-4.jpg"></div>
<div id="minimenu"><i class="fa fa-bars"></i></div>
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Redesign</li>
<li>From You</li>
</ul>
</nav>
</div>
</header>
<div id="container">
<!-- This is the Home section -->
<section id="home" class="section">
<header>
<h1>
CREATIVE<br />
CLOTHING<br />
DESIGN<br />
with Zebo’s
</h1>
</header>
<article>
<p>Reuse, reduce, recycle- it generates less overall waste,
it’s free, and your favorite pieces of clothes will last longer. In a few easy steps
you can redesign your own clothes in fashionable ways.
<strong><p>Here is how:</p> </strong>
</article>
</section>
<!-- This is the About section -->
<section id="about" class="section">
<header>
<h2>ABOUT</h2>
</header>
<article>
<p>
It is very important to recycle our unused or overused clothes. Because textile and fashion industries
are not as innocent as they seem to be. The fashion indusrty is the second biggest polluter
in the world after the oil industry. Process of cloth making includes high rates of water pollution,
water consumption, microfibers in the ocean, waste accumulations, greenhouse gas emission and many
more impacts to the world.</p>
<p>
Our mission is to show people how to bring their old clothes or shoes back to life in a fashionable
way and embrace them to be considered when buying or giving away their clothes.
</p>
</article>
</section>
<!-- This is the Product section -->
<section id="Redesign" class="section">
<header>
<h2>LET’S REDESIGN A PAIR OF SHOES</h2></header>
<article>
<p>This section will show you a tutorial for how to redesign your high top Converse shoes.</p>
<p>Lets start:</p>
<h3>STEP#1: FIND A HIGH TOP CONVERSE TO REPAIR</h3>
</article>
</section>
<!-- This is the Contact section -->
<section id="From You" class="section">
<header>
<h2>From You</h2>
</header>
</section>
</div>
No entirely sure what happened, but I have a large gap after the top image. I've been tweaking the code so it's responsive and then added this image and everything got thrown off. Any thoughts on what I'm doing wrong. Ideally the image is much closer to the 2 columns of content below.
I've tried messing with the flexbox and the image and nada is happening.
html {
width: 960px;
font-size: 100%;
font-family: "Arial", sans-serif;
color: #112271;
margin: 0 auto;
}
.flex-container {
width: 960px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.banner-image {
width: 960px;
min-height: 50px;
background: #112271;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 10px;
}
.banner-image h1 {
color: white;
}
.topics-sidebar {
width: 320px;
padding-top: 40px;
}
.main-content {
width: 640px;
padding-top: 40px;
}
.individual-post {
margin-bottom: 50px;
}
.main-content p.return-link {
margin-bottom: 50px;
}
/* Left arrow for links that return to index.html */
i {
border: solid #112271;
border-width: 0px 2px 2px 0px;
padding: 5px;
display: inline-block;
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
ul {
list-style-type: none;
padding: 0;
line-height: 2;
}
a:link, a:visited {
color: #112271;
}
a:hover {
color: #F09F08 ;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="../html-visual/styles.css">
<title>HTML & CSS Cheatsheet</title>
</head>
<body>
<div class="flex-container">
<div class="banner-image">
<h1>HTML & CSS Cheatsheet</h1>
</div>
<div class="topics-sidebar">
<h3>Topics</h3>
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Flexbox</li>
<li>Forms</li>
<li>Images</li>
<li>Links</li>
<li>Lists</li>
<li>Responsive Design</li>
<li>Resources</li>
<li>Tables</li>
</ul>
</div>
<div class="main-content">
<h2>Recent Posts</h2>
<div class="individual-post">
<p>General Template | Last Updated Dec. 3, 2019</p>
<p>This is the basic layout for a webpage.</p>
</div>
<div class="individual-post">
<p>Linking a CSS File | Last Updated Dec. 3, 2019</p>
<p>Each HTML page must include a reference to the external style sheet file.</p>
</div>
<div class="individual-post">
<p>Box Model | Last Updated Dec. 3, 2019</p>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
You just have to get rid of
padding-top: 40px
at your .main-content and .topics-sidebar
Or change them to any value you want
A better solution is to set
margin-bottom : (YOUR_VALUE)px
to your .banner-image
I want my navigation links to be centered in my fixed navigation bar i tried to
adding padding but somehow the navigation expands. Also i tried to vertical-align but that didn't do much. I am really new to CSS so explanations would be helpful in cases if this happened again
HTML
`<html>
<html>
<head>
<title>Photography | Home </title>
<link href="app.css" rel="stylesheet"/>
<script type="application/javascript" src="on.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best
quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">asdasdsada
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>`
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
padding-top: 30px;
}
header a {
text-decoration: none;
text-transform: uppercase;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float:right;
text-align: center;
padding-right: 20px;
}
nav {
text-align: center;
}
I would use display: flex. It makes this really easy. Use align-items: center; to center vertically and justify-content: space-between to separate the logo from the nav. Then I would also float your nav li's left, so they're in order. You could use flex there, too, but isn't necessary.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
}
header a {
text-decoration: none;
text-transform: uppercase;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
text-align: center;
padding-right: 20px;
}
nav {
text-align: center;
}
<html>
<head>
<title>Photography | Home </title>
<link href="app.css" rel="stylesheet" />
<script type="application/javascript" src="on.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">asdasdsada
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
I have been at this for a while, here is my HTML and CSS together kind of simplified. I'm sure it's something simple but I cant figure it out for the life of me. I just need to remove the white space in between the border and my content.
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--CSS Internal Style Sheet-->
<style>
HTML
{
border: 20px solid gray;
margin: auto;
}
#center
{
background-color: #EEE8AA;
padding: 0;
}
p
{
text-align: left;
margin-left: auto;
margin-right: auto;
padding: inherit;
width: 800px;
}
dl
{
text-align: left;
margin-left: auto;
margin-right: auto;
top-padding: 10px;
height: 500px;
width: 800px;
}
.box
{
background-color: #DCDCDC;
border: 1px solid #666;
padding: 5px;
}
#banner
{
position: relative;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 200px;
background-image: url(file:///C:/Users/Tollis/Documents/Website/Banner.png)
}
header
{
text-align: center;
font-size: 50px;
padding: 0;
background-color: #98FB98;
}
.menu
{
text-align: center;
padding-bottom: 30px;
padding-top: 30px;
background-color: #98FB98;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
li
{
display: inline;
}
</style>
<title> Module One Activity </title>
</head>
<body>
<header> Module One Activity </header>
<!--Navigation Bar-->
<div class="menu">
<ul>
<li> Page 1 </li>
   
<li> Page 2 </li>
   
<li> Page 3 </li>
   
<li> Page 4 </li>
</ul>
<div id="center">
<hr>
<p class="box" text-align="center"> <i> <b> Statement: </b> If students are allowed to use technology such as computers, calculators and tablets, then they will be able to develop a deeper understanding of the math concepts presented within their course. </i> </p>
<hr>
<h2 class="back" align="center"> Part 1 </h2>
<p> <b> Inverse: </b> If students are not allowed to use technology such as computers, calculators and tablets, then they will not be able to develop a deeper understanding of the math concepts presented within their course.</p>
<br>
<hr>
</div>
</body>
<footer>
<p> Created by: Tollis Hunt </p>
<p> Contact information: Email me! </p>
<br>
</footer>
Try this in your CSS:
body
{
margin:0;
padding:0;
}
This will remove your white space between content and border.
Hope it helps.
Demo