I want the "content" of my navbar to have a maximum size. Let me explain, my navbar has a width of 100% but the content inside does not, I do not want it to have that size of 100%, I need the navbar to have the same size as the content of my page (in this case is an 800px example) as found in my main article.
I am creating my navbar with flexbox property
The containers:
<div >
// Content A
</div>
<div >
// Content B
</div>
<div >
// Content C
</div>
represent an ul li a menu, another is a logo, and the other is a button
How can I do that effect?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
}
nav {
width: 100%;
max-height: 60px;
background-color: black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.item {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #ccc;
}
main {
max-width: 800px;
background-color: #fff;
width: 100vw;
height: 100vh;
margin: 0 auto;
}
</style>
</head>
<body>
<nav>
<div >
</div>
<div >
</div>
<div >
</div>
</nav>
<main>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
</main>
</body>
</html>Updated
Ok, but the content of a div is not centered, it is left justified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
}
nav {
width: 100%;
max-height: 60px;
background-color: black;
}
.item {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #ccc;
}
main {
max-width: 800px;
background-color: #fff;
width: 100vw;
height: 100vh;
margin: 0 auto;
}
.container{
max-width: 800px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
</style>
</head>
<body>
<nav>
<div >
<div >
</div>
<div >
</div>
<div >
</div>
</div>
</nav>
<main>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
</main>
</body>
</html>CodePudding user response：
If you just want a 100% width div with the actual divs inside to be 800px Simply keep the nav at 100% width, and wrap the three divs inside in another div with a width of 800px.
<nav>
<div >
<div >
</div>
<div >
</div>
<div >
</div>
</div>
</nav>
<style>
.container {
width: 800px;
}
</style>