Whenever I am testing with google chrome's dev tools for responsiveness, and when I am selecting Galaxy fold device or when I am shrinking the screen width via chrome dev tools , when the size goes below 300 x 655, the background of the header collapses. How to make it 100% width in all screen size?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #202063;
color: gainsboro;
ul {
li {
list-style-type: none;
cursor: pointer;
}
}
a {
text-decoration: none;
color: inherit;
}
main,
header {
padding: 20px;
}
}
header {
display: flex;
background-color: #fff;
color: #202063;
font-weight: bold;
justify-content: space-between;
nav {
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
li {
margin: 0 10px;
}
li:hover {
border-bottom: 2px solid rgb(255, 255, 255);
padding-bottom: 4px;
}
}
}
}
.text_center {
text-align: center !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>MrSrv7</title>
</head>
<body>
<header>
<h4 id="brand_text" class="text_center">MrSrv7</h4>
<nav>
<ul id="navlinks">
<li>
<a href="#about">
About
</a>
</li>
<li>
<a href="#contact"> Contact </a>
</li>
<li>
<a href="#testimonials"> Testimonials </a>
</li>
</ul>
</nav>
</header>
</body>
</html>
question from:
https://stackoverflow.com/questions/65880471/how-to-make-the-width-of-header-100-all-the-time 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
