Here's a solution that should work:
<html>
<head>
<meta charset="UTF-8"">
<style>
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; background-color: #282A2E; }
menu {
color:white;
font-size: 20px;
}
.menu_item {
border: 1px solid white;
width:fit-content;
}
</style>
</head>
<body>
<div style="overflow: hidden;">
<menu>
<div class="menu_item">
text
</div>
</menu>
</div>
</body>
</html>
The issue was with incorrectly defining the class menu_item. Remember, # denotes an id, not a class.
Result:
<html>
<head>
<meta charset="UTF-8"">
<style>
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; background-color: #282A2E; }
menu {
color:white;
font-size: 20px;
}
.menu_item {
border: 1px solid white;
width:fit-content;
}
</style>
</head>
<body>
<div style="overflow: hidden;">
<menu>
<div class="menu_item">
text
</div>
</menu>
</div>
</body>
</html>
To enhance the appearance, I also included width:fit-content; to ensure the border only surrounds the text and added padding for better spacing as shown below:
<html>
<head>
<meta charset="UTF-8"">
<style>
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; background-color: #282A2E; }
menu {
color:white;
font-size: 20px;
}
.menu_item {
border: 1px solid white;
width:fit-content;
padding:1em;
}
</style>
</head>
<body>
<div style="overflow: hidden;">
<menu>
<div class="menu_item">
text
</div>
</menu>
</div>
</body>
</html>
Note: Using border-color may be redundant. Instead, you can achieve the same effect with
border: <width> <design> <color>
, like so:
border: 1px solid white