I need two of my main buttons to have the same sizes, I'm still new to web development so I have no clue.
I currently have the following HTML and CSS for the index.html
<body>
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
And then created a center class and 2 different button classes.
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
This is the output:
https://leonisgeweldig.be/stackoverflow/
Give both buttons same width and reduce the font-size
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.container{
position: relative;
}
.center{
position: absolute;
top: 50%;
left: calc(50% - 210px);
color: white;
}
<body>
<div class="container">
<img height="100%" width="100%" src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
</div>
</div>
</body>
You can add a width and an align center to the classes:
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
a{text-decoration:none;}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
Avoid wrapping block level element with inline element.
Also you can define common button class for both these buttons and add another
class which defines
background color to differentiate.
so you can write HTML and css more semantic as:
.button{
padding: 20px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 150px;
text-align:center;
margin:0 10px;
color: #fff;
text-decoration: none;
}
.background-grey{
background: grey
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#" class="button">
<i class="fas fa-bell"></i>
<span> Update</span>
</a>
<a href="#" class="button background-grey">
<i class="fab fa-paypal"></i>
<span> Support the project<span>
</a>
<div>
Simply give them same width.
.button1,
.button2 {
min-width: 250px !important;
text-align: center;
font-size: 18px;
margin: 10px 15px;
box-sizing: content-box;
}
.button1 {
padding: 20px 60px;
background-color: #00B056 !important;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
a {
text-decoration: none;
color: white;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#">
<h1 class="button1"><i class="fas fa-bell" aria-hidden="true"></i> Update</h1>
</a>
<h1 class="button2"><i class="fab fa-paypal" aria-hidden="true"></i> Support the project</h1>
<div>
</div>
</div>
<div>
Related
How can I separate the cards in my project; I am new to HTML and am still learning so I don't know how to do this. I don't like how the cards are right up next to each other; is there any way I can fix this?
Here is my code:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.gameshell{
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="gameshell">
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
</div>
</body>
</html>
There is a lot of duplicated and unnecessary code. Try removing it.
To increase the gap between div elements you can use the gap property.
Check out the docs here.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.gameshell {
height: auto;
justify-content: center;
display: flex;
gap: 1rem;
/*newly added*/
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="gameshell">
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
</div>
Try grid for making layouts like this, it comes quite handy.
But right now I am guessing you are learning flex.
There are two ways you can do this.
First: the flex way
gap: 10px;
the gap property is actually quite great. It works just like its literal meaning. It produces a gap between your flex childs, Horizontally and vertically too.
Second: the css way
.card{
margin: 10px; //quite simple actually :)
}
try gap though (works with grid too)
I've been coding for a while. then use Bootstrap later make me see the problem by only my first section(home) background turns white but in html background-color is black. Maybe I've used Bootstrap before, it's causing the error.enter image description here
html {
background-color: #222831;
font-size: calc(60% + 0.8vmin);
width: 100%;
height: 100%;
height: 1000px;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
.home {
display: relative;
max-width: 1000px;
min-height: 100vh;
margin-top: calc(6rem + 2rem);
margin-left: auto;
margin-right: auto;
padding: 4rem 2rem;
text-align: center;
}
.home-container {
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.home-container .media {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.home-container .media a {
font-size: 1.5rem;
}
.home-container .media a :hover {
color: #ff6768;
}
.home-container .me {
margin: 0 10px;
}
.home-container .me h2 {
font-size: 3rem;
color: #FD7013;
font-weight: 600px;;
}
.home-container .me h3 {
font-size: 1.5rem;
color: #F3AA29;
font-weight: 600px;;
}
.home-container .me p {
max-width: 380px;
font-size: 2rem;
color: #EEEEEE;
font-weight: 500px;
}
.home a {
font-size: 1.5rem;
}
.home .scroll-down i{
color: #ff6768;
font-size: 1.5rem;
margin-top: 30px;
animation: scroll-down 2s ease infinite;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<section class="home" id="home">
<div class="home-container">
<div class="media">
<a href="https://www.facebook.com/webbalaka/" target="_blank"
><i class="fa-brands fa-facebook-f"></i
></a>
<a href="https://www.instagram.com/web.wafu/" target="_blank"
><i class="fa-brands fa-instagram"></i
></a>
<i class="fa-brands fa-twitter"></i>
</div>
<div class="me">
<h2>Pasit Khumsena</h2>
<h3>SCiUS Student</h3>
<p>"Don't worry about what you can't control"</p>
</div>
<div class="pic-me">
<!-- <img src="/AnotherPort/img/IOIOIOIO.JPG" alt="" /> -->
<div style="background-color: red; width: 350px; height: 400px"></div>
</div>
</div>
<a href="#about" class="scroll-down"
>Scroll Down <i class="fa-solid fa-angles-down"></i
></a>
</section>
or perhaps caused by nav-bar high over section.
.nav-bar {
position: relative;
height: calc(4rem + 1rem);
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 0 1.25rem;
transition: 0.5s ;
}
.nav-item {
justify-content: space-around;
display: flex;
column-gap: 2rem;
}
.nav-bar h1{
font-size: 3em;
color: #ff6768;
}
.nav-item a {
font-size: 1.2em;
font-weight: 500px;
color: #EEEEEE;
}
.nav-item a:hover {
color: #F3AA29;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
<header>
<div class="nav-bar">
<div class="Portfolio">
<h1>Portfolio</h1>
</div>
<div class="nav-item">
Home
About
Education
Skill
Contact
</div>
</div>
</header>
how i want it to look like
how it looks right now
.row2 {
display: flex;
justify-content: space-evenly;
align-items: stretch;
}
.til-col {
flex-basis: 32%;
border: 7px solid #c9c9c9;
border-radius: 30px;
margin: 10px;
position: relative;
overflow: hidden;
padding: 40px;
box-shadow: 5px 5px 20px rgba(92, 91, 91, 0.2);
flex-direction: column;
align-items: center;
}
.til-col img {
width: 50%;
border-radius: 10px;
padding-bottom: 5%;
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
margin: 12px 34px;
border-radius: 10px;
font-size: 13px;
padding: 0 20px;
background: #012a5d;
position: relative;
cursor: pointer;
}
<div class="row2">
<div class="til-col">
<img src="images/Home/Layer 2-2.svg">
<p>Interact with a TIL timeline showing key moments and events over the years</p>
<a href="classroom.html" class="button">
<h3>TIL Story</h3>
</a>
</div>
<div class="til-col">
<img src="images/Home/Progress.svg">
<p>Discover projects and initiatives that have launched out of TIL to support innovation in learning spaces</p>
<a href="classroom.html" class="button">
<h3>Projects</h3>
</a>
</div>
<div class="til-col">
<img src="images/Home/Report_icons-02 1.svg">
<p>See the transformation of classroom spaces and follow progress over stages of the redesign process</p>
<a href="classroom.html" class="button">
<h3>Classroom Redesign</h3>
</a>
</div>
</div>
I want to make the image of each box aligned with each other, same with the text and the button, like it is presented in the image. Yet everything would follow right after the image, the text ends. I also want to uniform the size of the image, without messing up the proportion, but I don't know how to do so.
Simply adding the below styles to ".til-col" class will achieve the expected result
display: flex;
text-align: center;
Maybe something like this?
P.S. I don't think CSS have something to let you horzionally align several child elements from different blocks.
.row2 {
display: flex;
justify-content: space-evenly;
align-items: stretch;
}
.til-col {
display:flex;
flex-basis: 32%;
border: 7px solid #c9c9c9;
border-radius: 30px;
margin: 10px;
position: relative;
overflow: hidden;
padding: 40px;
box-shadow: 5px 5px 20px rgba(92, 91, 91, 0.2);
flex-direction: column;
align-items: center;
}
.til-col img {
width: 50%;
border-radius: 10px;
padding-bottom: 5%;
}
.til-col > p{
padding-bottom:40px;
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
margin: 12px 34px;
border-radius: 10px;
font-size: 13px;
padding: 0 20px;
background: #012a5d;
position: absolute;
bottom:20px;
cursor: pointer;
}
<div class="row2">
<div class="til-col">
<img src="images/Home/Layer 2-2.svg">
<p>Interact with a TIL timeline showing key moments and events over the years</p>
<a href="classroom.html" class="button">
<h3>TIL Story</h3>
</a>
</div>
<div class="til-col">
<img src="images/Home/Progress.svg">
<p>Discover projects and initiatives that have launched out of TIL to support innovation in learning spaces</p>
<a href="classroom.html" class="button">
<h3>Projects</h3>
</a>
</div>
<div class="til-col">
<img src="images/Home/Report_icons-02 1.svg">
<p>See the transformation of classroom spaces and follow progress over stages of the redesign process</p>
<a href="classroom.html" class="button">
<h3>Classroom Redesign</h3>
</a>
</div>
</div>
You can follow below code for solution
.row2 {
display: flex;
justify-content: space-evenly;
align-items: stretch;
}
.til-col {
flex-basis: 32%;
border: 7px solid #c9c9c9;
border-radius: 30px;
margin: 10px;
position: relative;
overflow: hidden;
padding: 40px;
box-shadow: 5px 5px 20px rgba(92, 91, 91, 0.2);
flex-direction: column;
align-items: center;
display: flex;
justify-content: space-between;
text-align: center;
}
.til-col img {
width: 50%;
border-radius: 10px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 150px;
margin-bottom: 30px;
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
margin: 34px 0 0 0;
border-radius: 10px;
font-size: 13px;
padding: 0 20px;
background: #012a5d;
position: relative;
cursor: pointer;
}
<div class="row2">
<div class="til-col">
<div class="til-col-head">
<div class="icon"><img src="https://dynamic.brandcrowd.com/asset/logo/2a056b05-ac9b-404f-a619-eba59f92ef48/logo-search-grid-1x?v=637631474641000000"></div>
<p>Interact with a TIL timeline showing key moments and events over the years</p>
</div>
<a href="classroom.html" class="button">
<h3>TIL Story</h3>
</a>
</div>
<div class="til-col">
<div class="til-col-head">
<div class="icon"><img src="https://cdn-icons-png.flaticon.com/512/109/109733.png"></div>
<p>Discover projects and initiatives that have launched out of TIL to support innovation in learning spaces</p>
</div>
<a href="classroom.html" class="button">
<h3>Projects</h3>
</a>
</div>
<div class="til-col">
<div class="til-col-head">
<div class="icon"><img src="https://miro.medium.com/max/1268/0*2pi-PJAAVse41Ovk.png"></div>
<p>See the transformation of classroom spaces and follow progress over stages of the redesign process</p>
</div>
<a href="classroom.html" class="button">
<h3>Classroom Redesign</h3>
</a>
</div>
</div>
<body >
<div class="outer-container">
<div class="container">
<div class="header">
HOME
ABOUT
CONTACT
RESUME
</div>
<div class="big-heading">
<h2 style=color:white>
I'm Ankit Soni.
</h2>
</div>
<div class="social-media">
<a href="https://www.linkedin.com/in/ankit-soni-991495152/">
<i class="fa fa-linkedin"></i></a>
<a href="https://github.com/ankysony">
<i class="fa fa-github"></i></a>
<a href="mailto:ankit.soni.che16#iitbhu.ac.in">
<i class="fa fa-envelope"></i></a>
</div>
<div class="scrolldown">
<a href="">
<i class="fa fa-arrow-circle-down"></i>
</a>
</div>
</div>
</div>
</body>
I cannot find any type of mistake in it but my links in it are not working (no cursor pointer no redirects). Only the last one with arrow circle is working. The links under class social-media are not.
I got a part of css which is creating the error please see to it and suggest the possible way to fix error.
.outer-container .container .big-heading
{
height: 100%;
width: 100%;
display: flex;
font-size: 3em;
position: absolute;
align-items: center;
justify-content: center;
margin-top: -50px;
}
and the entire css code is below.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.outer-container
{
height: 792px;
width: 1440px;
}
h2{
font-family: sans-serif;
}
html {
background: url(../images/banner.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
.outer-container .container .header
{
text-align: center;
word-spacing: 100px;
padding-top: 10px;
}
.outer-container .container .header a
{
font-family: sans-serif;
text-decoration: none;
color: white;
}
.outer-container .container .big-heading
{
height: 100%;
width: 100%;
display: flex;
font-size: 3em;
position: absolute;
align-items: center;
justify-content: center;
margin-top: -50px;
}
.outer-container .container .social-media
{
height: 100%;
width: 100%;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.outer-container .container .social-media i
{
padding: 20px;
margin: 20px;
color: white;
text-shadow: 1px 1px 1px #ccc;
font-size: 30px;
}
.outer-container .container .scrolldown
{
height: 100%;
width: 100%;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
margin-top: 300px;
}
.outer-container .container .scrolldown i
{
padding: 20px;
margin: 20px;
color: white;
text-shadow: 1px 1px 1px #ccc;
font-size: 50px;
}
In the header class, your href is not redirecting you anywhere, because you only specified href="#", which neither points to another page nor points to any specific id on your page. You should add your url to to navigate to another page (or, in this case maybe an id on your own page):
href="www.site.com"
Also, it seems like in the social-media class, you did not specify any text for the link, which is why they aren't showing up.
You should put some text between the opening and closing tags:
link text
Cursor: pointer is showing and working fine in your code, to get font awesome work you need to include the library of font awesome.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body >
<div class="outer-container">
<div class="container">
<div class="header">
HOME
ABOUT
CONTACT
RESUME
</div>
<div class="big-heading">
<h2 style=color:white>
I'm Ankit Soni.
</h2>
</div>
<div class="social-media">
<a target="_blank" href="https://www.linkedin.com/in/ankit-soni-991495152/">
<i class="fa fa-linkedin"></i></a>
<a target="_blank" href="https://github.com/ankysony">
<i class="fa fa-github"></i></a>
<a target="_blank" href="mailto:ankit.soni.che16#iitbhu.ac.in">
<i class="fa fa-envelope"></i></a>
</div>
<div class="scrolldown">
<a href="">
<i class="fa fa-arrow-circle-down"></i>
</a>
</div>
</div>
</div>
</body>
How do I put these <a>'s in the center of the div, next to each other with 40px of space in between them inside of a 100% width div?
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
#container {
width: 100%;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
You can do this by using display:flex and justify-content:center on #container
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
a.explore:first-child {
margin-right:40px;
}
#container {
width: 100%;
display:flex;
justify-content: center;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
These aren't buttons...they're links...there's a difference.
However, flexbox is ideal here:
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
#container {
width: 100%;
display: flex;
justify-content: center;
padding: 1em;
background: #c0ffee;
}
a:first-child {
margin-right: 20px;
}
a:last-child {
margin-left: 20px;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>