0

'm totally new here. I just started with the headline and bumbed into first issue: I can not get any space between the buttons . Using justify-content: space-between in any possible way. See code below. Now the buttons are far from eachother by using space-between. How can I keep the buttons to the right with some space between the buttons? Thx'

<!DOCTYPE html>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 <!--==================== UNICONS paste link from iconscout.com====================-->

 <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

  <!--==================== SWIPER CSS====================

    check whether I need to use swiper bundle.css or  If I don't want to include Swiper

     files in my project, I may use it from CDN:
      <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
-->
<title>Y.Eser Stukadoors Schilderwerk | Professionele stukadoorsbedrijf Nederland</title>

<!--=======================Header Logo=================================-->
<header class="header" id="header">
    <nav class="nav container">
        <a href="#" class="nav__logo">eigen logo hier</a>
<div class="btn">




    <div style = "display: flex; justify-content:flex-end; justify-content:space-between">
    <button>




        <a href="tel:+31064301327"><strong>Bel ons</strong>    


        
    </button>



    <br>
    <button>



        <a href="eser.yusuf58@hotmail.com"><strong>Mail ons</strong>
        </a>



    </button>
</div>


</div> 
enter code here

1 Answer 1

0

In flexbox, justify-content: space-between will always fix the two outermost elements to the edges of the container. You also have justify-content defined twice, so the later value is overriding the earlier value.

You may be better served removing that and applying a margin to the buttons instead. For example, set the "Mail ons" button to have margin-left: 20px or something to that equivalent.

<div class="btn">
    <div style = "display: flex; justify-content: flex-end;">
      <button>
          <a href="tel:+31064301327"><strong>Bel ons</strong>    
      </button>
      <button style="margin-left: 20px;">
        <a href="eser.yusuf58@hotmail.com"><strong>Mail ons</strong></a>
      </button>
  </div>
</div>

Here's a good explainer on how flexbox works.

2
  • Somehow I missed email-notification. Thank you for your clear answer. Make sense. Also thanks for the link, useful information. I have achieved online certification for front-end, but putting it into practise is so different. Small issues come up.
    – Yazzy
    Apr 5, 2022 at 10:16
  • @Yazzy Happy to help! Flexbox can be tricky to wrap your head around at first. I recommend building a sample page for yourself with examples of each property for future reference. Please mark my answer as accepted if you feel it resolves your question :)
    – RiverTam
    Apr 5, 2022 at 20:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.