I'm learning html/css/javascript by myself, and I've come across a dilemma. For some reason the content of the page is overlapping the header to the page, making the header useless. How do I make the header go on top of the content. I'll include pictures below of the code and how to page looks.
html file,
<!DOCTYPE html>
<html>
<head>
<title>Abismuth Homepage</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css">
<meta charset="UTF-8">
<meta name="description" content="Homepage">
<meta name="keywords" content="Homepage">
<meta name="author" content="Riley">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="../aboutus.html">Abismuth</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Latest story</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<h1><u>Welcome</u></h1>
<p>Demo Text</P
</div>
</div>
<div class="footer">
<div class="container">
<div class="logo">
<h1></h1>
</div>
</div>
</div>
</body>
</html>
Css file,
body {
margin: auto;
background: linear-gradient(132deg, #ffffff, #000000);
background-size: 1500% 1500%;
animation: BackgroundGradient 30s ease infinite;
}
#keyframes BackgroundGradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.container {
width: 955px;
margin: 0 auto;
word-wrap: break-word;
}
.header {
text-align: centre;
background: #D50000;
width: 100%;
height: 50px;
top: 0;
position: fixed;
}
.footer {
text-align: centre;
background: #D50000;
width: 100%;
bottom: 0;
position: fixed;
}
.logo {
float: left;
color: white;
font-family: 'Helvetica', 'Arial', 'sans-serif';
font-size: 15px;
}
.content {
text-align: center;
padding-top: 50px;
font-family: 'Helvetica', 'Arial', 'sans-serif';
background-color: #ffffff;
opacity: 0.5;
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.nav {
float: right;
font-family: 'Helvetica', 'Arial', 'sans-serif';
}
Since your nav is position: fixed, other elements on the page will not be aware of it's layout and will overlap it, and it will overlap other elements.
Since you've defined a height to the nav, you can use that height as the padding-top on body to offset the nav and start the content below it.
body {
margin: auto;
background: linear-gradient(132deg, #ffffff, #000000);
background-size: 1500% 1500%;
animation: BackgroundGradient 30s ease infinite;
padding-top: 50px;
}
#keyframes BackgroundGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
width: 955px;
margin: 0 auto;
word-wrap: break-word;
}
.header {
text-align: centre;
background: #D50000;
width: 100%;
height: 50px;
top: 0;
position: fixed;
}
.footer {
text-align: centre;
background: #D50000;
width: 100%;
bottom: 0;
position: fixed;
}
.logo {
float: left;
color: white;
font-family: 'Helvetica', 'Arial', 'sans-serif';
font-size: 15px;
}
.content {
text-align: center;
padding-top: 50px;
font-family: 'Helvetica', 'Arial', 'sans-serif';
background-color: #ffffff;
opacity: 0.5;
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.nav {
float: right;
font-family: 'Helvetica', 'Arial', 'sans-serif';
}
<!DOCTYPE html>
<html>
<head>
<title>Abismuth Homepage</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css">
<meta charset="UTF-8">
<meta name="description" content="Homepage">
<meta name="keywords" content="Homepage">
<meta name="author" content="Riley">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="../aboutus.html">Abismuth</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Latest story</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<h1><u>Welcome</u></h1>
<p>Demo Text</P </div>
</div>
<div class="footer">
<div class="container">
<div class="logo">
<h1></h1>
</div>
</div>
</div>
</body>
</html>
Related
I'm trying to align an image next to some text on my webpage without using any position properties like right:, left:, top:, and bottom: but I just can't align it the way I want
body {
background-color: #fafafa;
font-family: Epilogeal, sans-serif;
}
.main {
padding: 20px;
overflow: hidden;
}
nav {
width: 100%;
position: sticky;
display: flex;
}
.nav-links {
flex: 1;
text-align: left;
padding-left: 50px;;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 50px;
}
a {
text-decoration: none;
color: hsl(0, 0%, 41%);
font-family: Epilogeal, sans-serif;
}
.register-btn {
border: 2px solid hsl(0, 0%, 41%);
border-radius: 15px;
padding: 10px;
width: 4%;
text-align: center;
position: fixed;
right: 60px;
top: 16px;
}
.login-btn {
color:hsl(0, 0%, 41%);
position: fixed;
right: 215px;
}
.hero {
padding: 150px;
}
.hero-header {
color: hsl(0, 0%, 8%);
font-size: 50px;
}
.hero-text {
color: hsl(0, 0%, 41%);
font-size: 18px;
float: left;
}
.image {
width: 700px;
height: 700px;
float: right;
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">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://fonts.google.com/specimen/Epilogue">
<title>Document</title>
</head>
<body>
<div class="main">
<nav>
<div class="logo">
<img src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\logo.svg" alt="logo">
</div>
<div class="nav-links">
<ul>
<li>Features</li>
<li>Company</li>
<li>Careers</li>
<li>About</li>
</ul>
</div>
<div class="login-btn">
Login
</div>
<div class="register-btn">
Register
</div>
</nav>
<div class="hero">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch productivity soar.</p>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image">
</div>
</div>
</body>
</html>
Here's what my webpage looks like:
And here's what I want it to look like:
I'm not good with positioning stuff in CSS, so any help would be much appreciated!
You can try this.
Replace the Hero Element with this.
<div class="hero">
<div class="hero-left">
<div class="hero-header">
<h1>Make <br> remote work</h1>
</div>
<div class="hero-text">
<p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch
productivity soar.</p>
</div>
</div>
<img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image" />
</div>
and CSS of .hero selector with
.hero {
padding: 150px;
display: flex;
justify-content: space-between;
}
I have searched and tweek around and the last image still shows up very close to the second. This is a very simple responsive web layout that, for some mistake, it is not displaying properly. this keeps asking me for more details but I have no more details to give.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
widows: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.button_1 {
height: 38px;
background: #e8491d;
border: none;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* Header */
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 4px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 12px;
}
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../Assets/for\ rent.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
text-align: center;
color: #3433FF;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/* For Tenants */
#cozy {
padding: 15px;
background: #35424a;
}
.button_1 {
float: right;
margin-top: 15px;
}
/*Boxes*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#main {
margin-top: 20px;
}
#main .box {
float: left;
text-align: center;
width: 33%;
padding: 10px;
display: inline-block;
}
#main .box assets {
width: 100px;
}
/*Footer*/
footer {
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="description" content="Properties for lease">
<meta name="keywords" content="lakeland, oldsmar, lutz">
<meta name="author" content="SAGS PROPERTIES LLC">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAGS PROPERTIES</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
<script src="main.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span>SAGS Properties LLC</span></h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Lutz</li>
<li>Oldsmar</li>
<li>Lakeland</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Well Managed Properties</h1>
<p>In Lutz, Oldsmar and Lakeland</p>
</div>
</section>
<section id="cozy">
<div class="container">
<button type="submit" class="button_1">Tenants Click Here</button>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lutz.jpg">
<h3>Lutz</h3>
<p>Lakeview at Calusa Trace</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lakeland.jpg">
<h3>Lakeland</h3>
<p>Cobblestone Landing</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Oldsmar.jpg">
<h3>Oldsmar</h3>
<p>Gardens at Forrest Lakes</p>
</div>
</div>
</section>
<footer>
<p>SAGS PROPERTIES LLC © 2018</p>
</footer>
</body>
</html>
There are no more details to give. Making a question is as frustrating as learning this!!!
I have two pages utilizing the same CSS files. Essentially I want the header to be stuck to the top of the page, no margins. It works on my index page, but not the next page. More confusing still, it works in Codepen but not in my Visual Studio. I've checked the CSS link to both pages, and that works fine, the rest of the CSS works on both pages as it should. There is just this margin above one of the headers that isn't working. Inspect element shows all margins should be zero.
Incorrect (see black line at top?)
Correct (see no line?)
HTML of Correct Page:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Luxury Bath</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
<div id="index-container">
HTML of Incorrect Page:
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Shared by Both:
body {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto 0 auto;
}
#sticky-h1 {
margin: 0 auto 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 60px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
I can see that the #sticky-h1 has got a "padding-top: 20px".
You might need to remove that padding in order to get it stack to the top.
I also think that you just need "margin: 0 auto;" once.
Please check the example below:
(I have used SO logo as I did not have yours)
body, html {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto;
}
#sticky-h1 {
margin: 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 100px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn">Products</li>
<li class="btn">News</li>
<li class="btn">FAQ</li>
<li class="btn">About</li>
<li class="btn">Contact</li>
</ul>
</nav>
</div>
</body>
Following your comment, I have put the "padding-top: 20px" back and I have increased the margin of the "#banner" to 100px.
So actually I added a break to the HTML under the sticky-menu and it fixed this issue. Not sure if that is the correct way to do it... but since it worked perhaps I won't worry too much...
I'm trying to get my Nav menu text to sit beside one another beside the logo like a real website would have.
I made a mockup of the side for reference linked below for viewing purposes.
I've been literally stressing myself out over this simply mundane task, messing with margins, padding, floating, etc and no matter what I do to any of my elements either NOTHING happens or a whole bunch of shit will start flying all over the place and I can't even understand why.
My mockup Preview
How mine looks at present
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike{
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float:left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu{
margin-top:15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.search{
float: left;
}
.SearchGlass{
margin: 30px 900px;
float: left;
}
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
padding-bottom: 42px;
float:left;
text-align: left;
}
h1{
}
/* Class For Articles*/
.article{
float: left;
width: 100%;
margin-bottom: 72px
}
.article img{
width: 400px;
height: 225px;
margin-right: 1%
}
.article h1{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 22.5px;
}
.article p{
float:left;
width: 70%;
margin: 5px 0;
text-align: left;
font-weight: bold;
font-size: 12px;
}
footer{
display: block;
width: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Display your list items inline block.
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
}
.HeaderBike {
background-image: url(../img/HeaderBike.png);
background-position: 260px 70px;
background-repeat: no-repeat;
height: 382px;
}
/* Nav Element */
/* Header Element */
.site-navigation li {
height: 21px;
width: 49px;
margin-left: 35px;
margin-right: 11px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
float: left;
text-align: center;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* navmenu */
.navmenu {
margin-top: 15px;
width: 490px;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #fff;
}
.navmenu li {
display: inline-block;
}
.search {
float: left;
}
.SearchGlass {
margin: 30px 900px;
float: left;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Assignment3</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike">
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</div>
</header>
Either you're not posting the needed code for the solution or you have some indentation erros in your html.
<body>
<div class="container">
<header class="Team Sky">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
<nav class="site-navigation">
<ul class="clearfix navmenu">
<li>shop</li>
<li>checkout</li>
<li>video</li>
<li>
<form class="search">
<input id="search" type="text" name="search" placeholder="search">
</form>
</li>
</ul>
</nav>
<div id="HeaderBike" class="HeaderBike"> <--- open never closed
<div>
<h1>Team Sky</h1>
<P>the road to yellow</P>
</div>
</header> <--- this was after div that goes next
</div>
A simple way to do this would be to split your header into 3 columns and then place your logo, navigation and search fields into each of those sections.
I have included an example below:
.clearfix {
overflow: auto;
}
.header__section {
float: left;
width: 30%;
margin-right: 5%;
}
.header__section:last-child {
margin-right: 0;
}
<header class="header clearfix">
<section class="header__section">
Logo
</section>
<section class="header__section">
Nav
</section>
<section class="header__section">
Search
</section>
</header>
This question already has answers here:
Button Center CSS
(7 answers)
Closed 4 years ago.
I've tried so many solutions, it's giving me a headache!
* {
box-sizing: border-box;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #fff;
}
/* Global */
.container {
width: 100%;
margin: auto;
overflow: hidden;
border: 1px solid red;
}
button {
background-color: #ff5f49;
border: none;
padding: 15px;
color: #fff;
font-size: 1.2em;
}
/* Navigation */
header {
background-color: #353c42;
min-height: 75px;
text-align: center;
font-size: 1.3em;
}
nav ul li {
display: inline;
padding: 15px;
text-align: center;
}
nav ul li a {
text-decoration: none;
text-transform: uppercase;
color: #fff
}
/* Jumbotron */
#jumbotron {
}
#jumbotron img {
display: block;
width: 60%;
margin: auto;
margin-top: 80px;
}
.button-1 {
width: 20%;
display: inline-block;
margin: 0 auto;
}
/* Clearfix */
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Digital Creative Agency Melbourne">
<meta name="keywords" content="Creative Agency Melbourne">
<meta name="author" content="KreativeZ">
<title>KreativeZ | Creative Agency Melbourne</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Our Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="jumbotron">
<div class="container">
<img src="img/KreativeZ_logo.png" alt="KreativeZ Logo">
<div class="container">
<button class="button-1" type="button">Get in touch!</button>
<button class="button-1" type="button">See Our Work</button>
</div>
</div>
</div>
</section>
</body>
</html>
Add ' text-align: center;' to the container.
* {
box-sizing: border-box;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #fff;
}
/* Global */
.container {
width: 100%;
margin: auto;
overflow: hidden;
border: 1px solid red;
text-align: center;
}
button {
background-color: #ff5f49;
border: none;
padding: 15px;
color: #fff;
font-size: 1.2em;
}
/* Navigation */
header {
background-color: #353c42;
min-height: 75px;
text-align: center;
font-size: 1.3em;
}
nav ul li {
display: inline;
padding: 15px;
text-align: center;
}
nav ul li a {
text-decoration: none;
text-transform: uppercase;
color: #fff
}
/* Jumbotron */
#jumbotron {
}
#jumbotron img {
display: block;
width: 60%;
margin: auto;
margin-top: 80px;
}
.button-1 {
width: 20%;
display: inline-block;
margin: 0 auto;
}
/* Clearfix */
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Digital Creative Agency Melbourne">
<meta name="keywords" content="Creative Agency Melbourne">
<meta name="author" content="KreativeZ">
<title>KreativeZ | Creative Agency Melbourne</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Our Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="jumbotron">
<div class="container">
<img src="img/KreativeZ_logo.png" alt="KreativeZ Logo">
<div class="container">
<button class="button-1" type="button">Get in touch!</button>
<button class="button-1" type="button">See Our Work</button>
</div>
</div>
</div>
</section>
</body>
</html>
You might add display:flex and justify-content:center to the container of your buttons:
* {
box-sizing: border-box;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #fff;
}
/* Global */
.container {
width: 100%;
margin: auto;
overflow: hidden;
border: 1px solid red;
}
.container .container{
display:flex;
justify-content: center;
}
button {
background-color: #ff5f49;
border: none;
padding: 15px;
color: #fff;
font-size: 1.2em;
}
/* Navigation */
header {
background-color: #353c42;
min-height: 75px;
text-align: center;
font-size: 1.3em;
}
nav ul li {
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Our Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="jumbotron">
<div class="container">
<img src="img/KreativeZ_logo.png" alt="KreativeZ Logo">
<div class="container">
<button class="button-1" type="button">Get in touch!</button>
<button class="button-1" type="button">See Our Work</button>
</div>
</div>
</div>
</section>