Nesting Anchor Tags

Hey guys I really would love to know if this is a recommended approach to getting a prescribed design using HTML and CSS. Is there a better way to do this if I am wrong?

My code looks like this:

        SM Appliance Center 
        <a href = Q1F-About-Me.html target = myframe>

        <a href = Q1F-update.html target = myframe>
            <button>Update Inventory</button></a>

        <a href = Q2F-inventory.html target = myframe>
            <button>Display Inventory</button></a>

Required display is:
supposed design

My design is:

I don’t think you want to put all those anchor tags inside the h1 heading. The h1 heading should just be the text of the heading (SM Appliance Center) and then the links would be a separate block, perhaps wrapped in a <nav>?

To get the heading and links to line up horizontally you could wrap them all in a <div>, or perhaps a <header> and then apply display: flex on that.

Thank you @bbsmooth I tried all the suggestions but it alters the expected design.
Using the <nav>, <header> and <div> and styling in CSS (I didn’t use any two at the same time, header, nav is purely for illustration):

header, nav{
    height: 30px;
    display: flex;
    margin-left: 500px;

Alters the design to:

Even if I try using the margin attribute to style I can’t get the buttons inline with the <h1> element SM Appliance Center. My main concern is how to get the buttons inline with the <h1>

I really need to be able to see all of your code in order to help properly. Do you have a live link to this project?

CSS Tricks has an excellent document that explains all the flexbox options available. I think there may be some you will find very helpful.

It’s a string of web pages but I’ve been able to put the one we’re discussing in a codepen

Untitled (

You’ll most likely want to wrap the <h1> and <nav> in an element (maybe a <header>) and then put display:flex on that element and use other flex properties to get them to line up the way you want.

Also, you should not have a <button> inside of an <a>. Those are links and should just be <a>'s.