html - Flexbox justify content space between not responsive

Question

I'm having a very basic problem with the CSS in my React website, and I was looking for some help.

I have a very barebones header section set up

HTML:

<div className="nav">
            <div className="menu">
                <a href="/">Menu</a>
            </div>
            <div className="logo">
                <a className="title" href="/">Brand Name</a>
                <a className="subtitle" href="/">Slogan</a>
            </div>
            <div className="lang">
                <ul>
                    <li>FB</li>
                    <li>IG</li>
                    <li>TW</li>
                </ul>
            </div>
        </div>

CSS:

body {
    margin: 0;
    padding: 0;
}

.nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: white;
    text-decoration: none;
    font-family: Visual;
    letter-spacing: 1px;
    width: 100%;


    .menu{
        a{
            text-decoration: none;
            color: white;
            letter-spacing: 1.3px;
            font-size: 1.2rem;
        }
    }
    .logo{

        .title{
            font-size: 2rem;
        }
        .subtitle{
            text-align: center;
            margin-top: 5px;

        }
        a{
            text-decoration: none;
            color: white;
            display: block;
        }

    }

    .lang{
        font-size: 1.2rem;
        ul{
            li{
                display: inline;
                margin-left: 10px
            }
        }
        

    }
}

The flex seems to be working, but when I resize the window horizontally, the center element gets pushed off center and eventually out of the screen on one side.

Is this related to media queries?

question from:https://stackoverflow.com/questions/65924845/flexbox-justify-content-space-between-not-responsive

Answer 1

add padding: 0; property to ul in your css

ul {
  padding: 0;
  li {
    display: inline;
    margin-left: 10px;
  }
}

You can use border styling something like

border: 1px solid black;

when have problems with css. In this way, you can see which elements have unexpected properties like paddings or margins. When you use border styling for your ul, you will see it has padding. Make padding zero and your items will be centralized.