Text misaligned next to the image

I've been trying to finish for 2 days and I can not. Every time I move on one thing, everything is ruined. I'm still learning, do not judge me!

The code is this:

        .hygge-container{

            overflow: hidden ;
            position: absolute;
            top: 1217px;
            box-sizing: inherit;
            margin-left: 549px; 


        }

        .hygge-container-color{


            display:inline-block;
            padding-bottom: -15px;
            background-color: white;
            padding-right: 157px;




        }

        #hygge-image{
            width: 86.3% !important;

            float:left;
            display: inline-block;
            box-sizing: inherit;

        }

        .hygge-text{

            display: flex;
            font-size: 16px;


        }

        .hygge-text a{
            text-decoration: none;
            color: #3a3a3a;
        }

        .hygge-text a:hover{
            text-decoration: underline;
            color: rgb(0,115,187);
        }

       .sp3-text{
            bottom:13px;
            left: calc(700% / 12 + 16px);
            position:absolute;
        }

        .sp3-text a{
            color: #767676;
            text-decoration: none;
        }

        <div class="hygge-container">
            <div class="hygge-container-color">
                <a href="https://www.bbc.com/food/collections/hygge_food"><img id="hygge-image" src="img/cinnamon.jpg" /></a>
                <h3 class="hygge-text"><a href="https://www.bbc.com/food/collections/hygge_food">20 hygge foods you need in your life</h3></a>
                <span class="sp3-text"><a href="https://www.bbc.com/food/collections/hygge_food">collection</span></a>
            </div>




        </div>