Two rows of buttons that are mobile responsive - button

Question

I'm trying to create two rows of buttons, 3 on the top and 4 on the bottom to sit centred on the page
[Image showing what I am trying to do][1] [1]: https://i.stack.imgur.com/HgVLS.jpg
I've managed to get the two rows, however when i try and centre them on the page by adding:
display: flex; justify-content: center;
I loose the gap around each of the buttons - I can't work out where to add the padding to give a consistent space between each button!
I was also hoping for the buttons to be mobile responsive and wrap on smaller screens. However I can't seem to figure this out either!
Would really appreciate any help.
.jd-btn {
padding: 10px 35px;
border: solid 1px red;
display: inline-block;
text-align: center;
font-size: 1.6rem;
}
.jd-btn:hover,
.jd-btn:focus {
cursor: pointer;
background-color: red;
color: #fff;
}
<div style="display: flex; justify-content: center;">
<a class="jd-btn">Button 1</a>
<a class="jd-btn">Product info 2</a>
<a class="jd-btn">Button 3</a><br />
</div>
<div style="display: flex; justify-content: center;">
<a class="jd-btn">Account info 4</a>
<a class="jd-btn">Product info 5</a>
<a class="jd-btn">Help 6</a>
<a class="jd-btn">Button 7</a>
</div>
</div>