2 кнопки рядом друг с другом ширины поля с помощью css

Question

Как разместить эти <a> в центре div, рядом друг с другом с 40px пространства между ними внутри div ширины 100%?

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>

Answer 1

Вы можете сделать это с помощью display:flex и justify-content:center на #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>

Answer 2

Это не кнопки ... они ссылки. .. есть difference.

Однако Flexbox идеально подходит здесь:

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>