Flexbox justify content space between not responsive - html

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">
Menu
</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?

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.