Впервые делаю задание "
Сверстать сайт по макету" :)
Не получается задать ширину
aside, должно быть так:
-main+x2aside = 1100px
-main 500px
-aside 300px
-aside 300px
Если не задавать ширину, то все примерно автоматически так и подстраивается, но если задать, то левый асайд уменьшается до 200px и все становится не пропорционально(
Долго пытался понять в чем дело, ставил значения по разному, по разному обращался к блокам, но ничего не получается.
CSSbody {
padding: 0px;
margin: 0px;
background-color: #EBEBEB;
}
div.header {
width: 100%;
height: 50px;
background-color: #242424;
}
div.menu {
display: flex;
width: 1100px;
margin: 0px auto;
}
.menu a {
display: flex;
text-decoration: none;
color: white;
font-size: 19px;
font-family: sans-serif;
justify-content: center;
align-items: center;
height: 50px;
padding: 0px 20px;
}
.active, .menu a:hover {
background-color: #585858;
}
.container {
width: 1100px;
background-color: white;
margin: 0px auto;
display: flex;
font-family: sans-serif;
font-size: 12px;
line-height: 16px;
text-align: justify;
justify-content: center;
}
.left, .right {
width: 300px;
}
aside, main {
border: 1px solid black;
}
HTML<body>
<div class="wrapper">
<div class="header">
<div class="menu">
<a class="active" href="#">Main</a>
<a href="#">About Us</a>
<a href="#">Products</a>
<a href="#">Information</a>
<a href="#">Contacts</a>
</div>
</div>
<div class="container">
<aside class="left">
<h1>Lorem Ipsum Dolor Sit.</h1>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text.</p>
</aside>
<main>
<h1>Aliquam Sodales Consectetur.</h1>
<p>Ltext.</p>
<img src="C:\Users\KiLLer29\Desktop\Sublime\Second web\images\bee-1.jpg" alt="">
<p>text
</p>
<h1>Etiam et Bibendum!</h1>
<p>text</p>
<h1>Morbi Blandit Lectus</h1>
<img src="C:\Users\KiLLer29\Desktop\Sublime\Second web\images\bee-2.jpg" alt="">
<p>text</p>
<p>text</p>
</main>
<aside class="right">
<h1>Benefits of Honey</h1>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<img src="C:\Users\KiLLer29\Desktop\Sublime\Second web\images\bee-3.jpg" alt="">
<img src="C:\Users\KiLLer29\Desktop\Sublime\Second web\images\bee-4.jpg" alt="">
<h1>Honey Harmful Properties</h1>
<p>text</p>
<p>text</p>
<img src="C:\Users\KiLLer29\Desktop\Sublime\Second web\images\bee-5.jpg" alt="">
</aside>
</div>
<footer></footer>
</body>
</html>
Средний
Средний