my html page looks weird when I use phone view

Question

Here is part of my web header code. It looks good when I use my screen. What do I need to change to make the page looks good on the phone? I saw w3school has a code for Media Queries. Do I need to ad some breakpoint to fix is? I have "meta content="width=device-width, initial-scale=1" name="viewport"" in my code as well.

<div class="header"  >
<a href="<cfoutput>#root#</cfoutput>">
    <img src="pictures/title-img-no-fade.png" style="max-height: 12vh;left:50%;"/>
</a>

<div class="links" >
    <div class="link" style="left:20%">
        <a href=""><b>INDIVIDUALS/<br>ENTHUSIASTS</b></a>
        <div class="options" style="padding: 16px 26px";            
            <a href="" >LOGIN/JOIN</a>              
            <a href="" >CHANGE <br>MAKERS</a>               
        </div>
    </div>
    <div class="link" style="right:10%">
        <a href=""><b>BUSINESSES/<br>ORGANIZATIONS</b></a>
        <div class="options" style="padding: 16px 26px">            
            <a href="">LOGIN/JOIN</a>               
            <a href="">LEADERNPARD</a>              
            <a href="">IMPACT</a>               
            <a href="">PROCESS</a>              
            <a href="">GREEN <br>DIRECTORY</a>              
        </div>
    </div>
</div>

here is my css code

    .header{
--margin_lr:0em;
background-color: var(--green);
color: white;
margin: 0em;
padding: 1.2em var(--margin_lr);
display: grid;
/*width: calc(100vw - var(--margin_lr)*2);*/
min-height: 1vh;
justify-content: space-around;
align-content: center;
align-items: center;
justify-items: center;
grid-template-columns: 1fr 2fr;
/*width: 100vw;*/}
.header .links{
display: flex;
align-content: center;
justify-content: space-around;
align-items: center;
justify-items: center;
max-width: 55vw;
flex-direction: row;
flex-wrap: wrap;
min-width: 95%;}

Answer 1

add this in your code or master page if you have one

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

Answer 2

A web page looks different on different screens of varying sizes. Please use media queries to adjust the way you want your web page to look in desktop vs mobiles vs iPads etc.

Refer this link to learn more about media queries. https://css-tricks.com/a-complete-guide-to-css-media-queries/