My link which would go to the home page is on the Egypt coat of arms. But the link is only clickable on the nav bar. How do I fix it? The first block is HTML and the second is CSS.-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html
css
(HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="coatofarms"> <img src="coabetter.png" class="coa" width="75px"></div>
<div class="topnav">
News
Contact
About
</div>
<button type="button"class="buttonbook" >BOOK</button>
<div style="padding-left:16px">
<h2></h2>
<p></p>
</div>
</body>
</html>
(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("goodyegypt.png")
}
.coatofarms {
margin-top: -16px;
margin-left: 5px;
width: 5%;
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
margin-top: -151px;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.buttonbook {
background-color: #e9cda4;
border-radius: 50%;
width: 250px;
height: 100px;
border: none;
opacity: 0.7;
font-family: Algerian;
font-size: 30px;
margin-top: 35%;
margin-left: 43%;
align: center;
}
.buttonbook:hover {
background-color: #e1c295;
opacity: 0.7;
}
The use of margin-top as the only layout mechanism is what is causing you problems. In this fiddle I instead absolutely placed your button.buttonbook element.
https://jsfiddle.net/cwzp5dya/2/
.buttonbook {
position: absolute;
top: 55%;
left: 43%;
Highly recommend NOT using margin as your primary layout method.
Related
I want my website to be responsive and adjust to any device. I'm using glitch.com to create this website. For example on mac os, when I set my website to full screen there is a scrolling bar even thought I don't want there to be one. How can I achieve a responsive website? I've tried scaling my website down when on different devices but it wont work. Also, I provided some images and code below (including my website).
Website:
https://runturtle.glitch.me/
Code:
#import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#fname {
margin-bottom: 10px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
* {
font-family: "Rubik";
user-select: none;
}
form {
margin: auto;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #a0a0a0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
h1 {
align-items: center;
}
h3 {
color: #dde6d8;
}
input {
margin: 0 auto;
border: none;
color: black;
background-color: rgb(white);
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.dashboard {
width: 150px;
height: 800px;
position: absolute;
left: 10px;
top: 81px;
}
.home {
opacity: 1;
width: 150px;
}
article {
background: #131b0b;
width: 50%;
margin: 20px auto;
border-radius: 10px;
padding: 10px;
}
hr,
article .date {
color: #a0a0a0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Run Turtle</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img
src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px"
/>
<h1><strong>Run Turtle</strong></h1>
</header>
<main>
<article class="dashboard">
<h1>Dashboard</h1>
<hr />
<button
onClick="window.location.href='https://runturtle.glitch.me';"
class="home"
>
Home
</button>
<br />
<br />
<button
onClick="window.location.href='register.html';"
class="register"
>
Register
</button>
</article>
<article>
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</article>
</main>
<script src="index.js"></script>
</body>
</html>
Here's an image of when the browser is resized:
You can use the Bootstrap Grid System for a responsive website. The layout is in the form of rows and columns that can be adjusted depending on the device size.
Here's the documentation link.
Personally, I like AMP (Accelerated Mobile Pages.) I myself use it for my site and it works good with page layouts.
AMP has a page on how to set up your HTML document to make a responsive mobile page. Here is the article
I suggest you to follow #media rule. CSS Grid Layout Module will help you to solve the arisen problem. For an example I have put a solution code.
screenshot_1 screenshot_2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.menu {
float: left;
width: 25%;
text-align: center;
}
.menu article {
background-color: #1f2215;
padding: 8px;
height: 800px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
input {
margin: 0 auto;
border: none;
color: black;
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
#media only screen and (max-width: 620px) {
.menu,
.main {
width: 100%;
}
.menu {
height: 200px;
}
.main {
background: #1f2f15;
height: 600px;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div>
<header>
<img src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px" />
<h1><strong>Run Turtle</strong></h1>
</header>
</div>
<div>
<div class="menu">
<article>
<h1>Dashboard</h1>
<hr />
<button>
Home
</button>
<br />
<br />
<button>
Register
</button>
</article>
</div>
<div class="main">
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</div>
</div>
When I am trying to add a border to a div element on my website, I am getting these weird borders.
This is the result I was looking for:
intended result
HTML
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
CSS
.outlined-button
{
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
height: 48px;
width: 140px;
}
.outlined-button-text
{
color: #fff;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
}
The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.
A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)
I also attached an alternative solution:
body {
background: #162CEA;
padding: 2rem 1rem;
}
.heading {
color: #FFF;
}
.button {
padding: .5rem 1rem;
border-radius: .5rem;
}
.filled-button {
background: #FFF;
}
.outline-button {
border: 3px solid #FFF;
color: #FFF;
}
<h1 class="heading">hey<h1>
<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>
Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.
Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.
this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
</body>
<style>
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.filled-button-text {
display: table-cell;
vertical-align: middle;
}
.filled-button {
float: left;
width: 140px;
height: 48px;
margin-left: 15%;
background: #FFFFFF;
border-radius: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #000000;
display: table;
text-align: center;
}
.outlined-button {
width: 140px;
height: 48px;
box-sizing: border-box;
}
.outlined-button-text {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
}
.buttons {
border: 2px solid black;
}
</style>
</html>
You can use this code
body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #162cea;
}
.headline {
text-align: center;
color: #ffffff;
}
.buttons {
padding: 30px;
margin: 0 auto;
text-align: center;
}
.filled-button {
border-radius: 10px;
color: #000000;
font-weight: bold;
font-size: 30px;
height: 55px;
width: 140px;
background-color: #ffffff;
display: inline-block;
cursor: pointer;
margin: 0 10px 0 0;
padding: 0;
}
.filled-button .filled-button-text {
margin: 0;
padding: 9px;
}
.outlined-button {
border-radius: 10px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
height: 52px;
width: 140px;
background-color: #162cea;
display: inline-block;
border: 3px solid #ffffff;
cursor: pointer;
margin: 0 0 0 10px;
padding: 0;
}
.outlined-button .outlined-button-text {
margin: 0;
padding: 9px;
}
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.button {
width: 100%;
text-align: center;
}
.filled-button-text,
.outlined-button-text {
display: block;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
.outlined-button-text {
color: #FFFFFF;
}
.filled-button {
background: #FFFFFF;
}
.filled-button,
.outlined-button {
width: 49%;
display: inline-block;
border: 3px solid #FFFFFF;
box-sizing: border-box;
display: inline-block;
border-radius: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button">
<span class="filled-button-text">sign up</span>
</a>
<a class="outlined-button">
<span class="outlined-button-text">log in</span>
</a>
</div>
</div>
</body>
</html>
I know this should be easy, but my css skills are rusty a bit and this starts to drive me crazy.
I want to move language text right from logo on site, but nothing works for me.
This is my HTML:
<html lang="en">
<head>
<title>SWANKY Mint Hostel</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Istok+Web" rel="stylesheet">
</head>
<body class="body">
<img src="logo_piktogrami/drustvene-mreze.png" alt="mreze" class="networks">
<div class="div-main">
<div>
<img src="logo_piktogrami/logo_swanky.png" alt="logo" class="logo">
</div>
<div class="language">UK / KR / HR</div>
<div class="dropdown">
<button class="dropbtn">HOSTEL</button>
<div class="dropdown-content">
O NAMA
POVJEST
MENZA
PARTNERI
</div>
<button class="dropbtn">REZERVACIJA</button>
<button class="dropbtn">GALERIJA</button>
<button class="dropbtn">INFO</button>
<button class="dropbtn">KAKO DO NAS</button>
</div>
</div>
</body>
</html>
And this is my CSS:
.dropbtn {
background-color: #000000;
color: white;
padding: 8px;
font-size: 10px;
width: 100px;
margin-right: 5px;
font-family: 'Istok Web', sans-serif;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
top: 10.3%;
margin-left: 5px;
}
.body {
background-color: #95e5c4;
}
.logo{
width: 130px;
height: 130px;
float: left;
margin-left: 5px;
}
.networks{
width: 32px;
height: 186px;
margin-top: 7%;
}
.div-main {
height: 735px;
width: 685px;
background-color: #e6e6e6;
top: 50%;
left: 50%;
max-width: 1000px;
margin: auto;
left: 1%;
right: 1%;
top: 0%;
bottom: 0%;
position: absolute;
}
.language{
font-family: 'Istok Web', sans-serif;
font-weight: bold;
margin-right: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #95e5c4;
font-family: 'Istok Web', sans-serif;
text-align: center !important;
font-size: 10px;
width: 100px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 12px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #e6e6e6}
.dropdown:hover .dropdown-content {
display: block;
}
What I have for now is this:
Need to align text to right so I have something like this instead:
Does someone see which property I am using wrongly or not using at all?
Add:
float: right;
margin: 5px;
to your .language class :)
For start, I'd add some padding, then to align this on the right side, I'd use either float:right or CSS GRID like this:
.box-container{
display:grid;
grid-template-columns:auto 25%; //Or whatever value you want
}
And simply put this text into the container. Let me know if it helps!
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}
I am trying to add a button to my simple web page. The button itself looks great, but I am not quite sure how to position it. I would like for it to be centered and positioned below the main text. It currently sits off to the left side. Any idea on how to do so?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
Learn More
</body>
</html>
Any help would be greatly appreciated. Thanks!
You don't necessarily need a container. Try the following:
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
width: 62px;
}
Auto margins don't apply to inline-block elements.
You can add a container to the buttons and align them to center . see example below
also when you are trying to create a style . try to make them reusable as they can be. One advantage of this is you can write lesser css.
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
.text-center {
text-align: center;
}
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class="text-center">
Learn More
</div>
Try putting the Button in a <div> and make text-align:center
<div class="btnContainer ">
Learn More
</div>
<style>
.btnContainer {
text-align:center;
}
</style>
Without extra markup adding the following rules to .button will do the trick
left: 50%;
position: absolute;
transform: translate(-50%, 0);
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
}
.button:hover {
background-color: #707488;
}
#button {
text-align: center;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class id="button">
Learn More
</div>
</body>
</html>
how do you think this way?