Style div elements to ignore baseline while remaining in a grid - html

Okay, so I have a problem with css/scss. It's difficult to explain, but I will do my best. Attaching images to better communicate what I'm trying to say.
I have a container div which contains five child divs:
Like this
These child divs contain FAQ questions that reveal the answer when the user clicks on a question. Hence, the div will grow vertically. The mockup I have received shows the tapped answer opening and "pushing" the below div downwards, while all other divs remain in place:
Like this
So, my question is, how do I go about this? I have tried making the parent div a flexbox, table and grid, but the problem still stands. I have also tried to make the child divs into floats, but that pushes the element to the side rather than downwards.
I picture placing the items in columns, which I could do if the divs were hardcoded, but they are created dynamically in a for loop:
#foreach (var category in Model.Content.Children().Where(x => x.IsVisible() && x.DocumentTypeAlias == "fAQSamling"))
{
<div class="faq-main-card question">
<div class="faq-header">
<object type="image/svg+xml" data="--"></object>
<h3 class="heading-24">#category.Name</h3>
</div>
#foreach (var question in category.Children().Where(x => x.IsVisible() && x.DocumentTypeAlias == "faqItem"))
{
<div class="question">
<h4 class="faq-question-title" title="Klicka för att visa svaret på frågan.">
#(question.HasValue("faqQuestion") ? question.GetPropertyValue("faqQuestion") : question.Name)
<object type="image/svg+xml" data="--"></object>
</h4>
<div>
#question.GetPropertyValue("fAQAnswer")
</div>
</div>
}
</div>
}
I hope I have explained properly. Please ask me to clarify if I need to. If it is relevant to the solution, the "answers" are set to height 0 with overflow hidden when closed, and when opened they're set to height 'auto'. The opening function is written in vanilla JS.


Hello instead of using flex i have used bootstrap row and column to do the task but the example cannot be used in all type of situations.
.hello{
padding: 20px;
text-align: justify;
height: 400px;
overflow: hidden;
background-color: salmon;
margin: 30px;
}
.hello h1{
text-align: center;
}
.hello:hover{
height: 100%;
padding-bottom: 0 ;
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="hello"><h1>asa</h1> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
<div class="hello"><h1>asfa</h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
</div>
<div class="col-md-4">
<div class="hello"><h1>asfs</h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
<div class="hello"><h1>asfa</h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
</div>
<div class="col-md-4">
<div class="hello"><h1>asfa</h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa corrupti eos assumenda voluptatibus voluptatum tenetur quae dolorum soluta recusandae natus blanditiis omnis in, nulla commodi saepe provident vel laboriosam architecto? Modi omnis dolor sint, corrupti ipsum possimus! Repellat temporibus suscipit aspernatur, nulla illum dolorem facere magnam. Nam necessitatibus reprehenderit nisi eius cumque. Eius ex quaerat perspiciatis fugit eum, necessitatibus deleniti excepturi dolor, omnis saepe quia aliquam accusantium amet incidunt repudiandae, asperiores velit porro aspernatur sint? Possimus dolorum consequuntur provident dolorem praesentium sint ea et sequi nisi. Incidunt temporibus illo commodi voluptate ex molestias necessitatibus inventore at facilis dolore, consequatur officiis adipisci vel, magni impedit suscipit itaque, mollitia maxime optio qui voluptatem sequi! Omnis error adipisci veniam animi numquam tenetur quam minus dolorem ex sit perferendis facere nisi, ratione aut excepturi quae eos officiis laboriosam! Debitis doloribus maiores sit, voluptatem amet optio distinctio laboriosam a porro, qui corporis. Fuga, quam dignissimos.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
This Raw code requires quite a lot of more editing to be put in use.

Related

Dynamic Grid Height Depending on Number of Elements

I am trying to achieve a CSS Grid layout with two columns: the left column consists of a single element (e.g. a post) while the right column can have up to three posts (can have one or two, as well).
A basic example of the HTML layout would look like this:
<div class="grid">
<div class="primary">Potentially long text, but at most 1000px high...</div>
<div class="secondary">Text 1...</div>
<div class="secondary">Text 2...</div>
<div class="secondary">Text 3...</div>
</div>
Since the number of posts on the right side is dynamic, I can't really define an explicit grid with three rows, or else I will have empty grid cells if I end up with fewer than three posts.
I can't use grid-row: 1 / -1 on the left column without defining an explicit grid with three rows (at least from what I can tell).
The end goal is to have a blog post layout which features an article on the left side in full length, but only up to a specific height (e.g. 1000px, overflow hidden, text fading out), and up to three more posts on the right side with only excerpt-length of text. The columns of the grid should have equal height at all times but the right column's height should never extend the max-height set for the left column (the 1000px).
If the right side only has one or two posts, the left column should shrink accordingly. In other words, the posts on the right side should never have more whitespace than necessary because of the left column being too high.
To clarify: The height should ultimately be controlled by the right side and the posts on the right side should not be stretched if there is a very long text on the left side, instead the left side should be cut off at 1000px.
I created a codepen to illustrate my problem, or rather the situation I'm stuck in at the moment: https://codepen.io/cwardle/pen/ExZJJXL.
.grid {
display: grid;
column-gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.primary {
grid-row: 1 / -1;
position: relative;
max-height: 300px;
background: #cecece;
overflow: hidden;
}
.primary:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(transparent 200px, #fff);
}
.secondary {
grid-column-start: 2;
background: #aaa;
margin-block-end: 1rem;
}
.secondary:last-child {
margin-block-end: 0;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>
I would highly appreciate any help or pointers you could offer. Thanks.

position:absolute can do the job here:
.grid {
display: grid;
gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:1fr; /* all row equal in height */
position:relative;
}
.primary {
top:2rem;
left:2rem;
bottom:2rem;
width:calc(50% - 2.5rem); /* take half the width (the first 1fr) */
position: absolute;
max-height: 300px;
background: #cecece;
overflow: hidden;
}
.primary:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(transparent 200px, #fff);
}
.secondary {
grid-column-start: 2;
background: #aaa;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
</div>

This appears to work for me using your snippet if I simply remove the grid-template-rows and increase the height of that container:
.grid {
display: grid;
column-gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
}
.primary {
grid-row: 1 / -1;
position: relative;
max-height: 500px;
background: #cecece;
overflow: hidden;
}
.primary:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(transparent 200px, #fff);
}
.secondary {
grid-column-start: 2;
background: #aaa;
margin-block-end: 1rem;
}
.secondary:last-child {
margin-block-end: 0;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>
Here it is full height, if you didn't want to fade out the content:
.grid {
display: grid;
column-gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
}
.primary {
grid-row: 1 / -1;
position: relative;
background: #cecece;
overflow: hidden;
}
.secondary {
grid-column-start: 2;
background: #aaa;
margin-block-end: 1rem;
}
.secondary:last-child {
margin-block-end: 0;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>

Right edge of navbar is not showing - setting right margin does not resolve issue

I have been trying to create two side by side navbars over the past few days. I have gotten over most of the issues faced but have an annoying niggle left. The very right edge of the navbar does not show. I have a workaround( set the width to 99% ) but I would like to to understand the reason why it is not appearing. It seems that you get an automatic margin on the left hand side, but not right.
I've searched this site amongst other, but they appear to have the opposite problem!
Adding right-margin statement at various places impacts the content, but not the navbar.
I have checked the output in Mozilla and Chrome to make sure it wasn't the browser.
Couple of images to clarify:
Navbar when at 100%
And at 99% set( the workaround )
Navbar at 99%
Here is the HTML code. Go easy on me, I am a beginner in CSS on a steep learning curve! Started with Bootstrap but came to the realization that without knowing the basics, BootStrap would be a life of copy pasta( plus all the bloat of the 80% you don't need ).
<!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">
<style>
.mymenus {
top: 0;
/* have tried various left/right/both margin combinations here */
display: inline-flex;
flex-direction: row;
height: max-content;
width: 100%; /* 100% makes the right edge disappear 99% is workaround. */
background: tomato; /* Not required - Just to see if background is showing */
border-style: double;
border: firebrick;
position: fixed;
}
ul {
font-family: sans-serif;
font-size: larger;
font-weight: bold;
list-style: none; /* Gets rid of the bullet points */
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: violet;
border-style: dotted;
justify-content: space-evenly; /* have to use justify content, not the text to get it to space evenly */
}
li {
border: solid yellow;
padding: 10px 20px 10px 10px; /* see impact of padding */
margin-bottom: 5px;
margin-top: 5px;
}
#navbar_left {
width: 70%;
background: lightcyan;
float: left;
}
#navbar_right {
width: 30%;
background: lightcyan;
float: right;
}
</style>
<title>SideBySide navbar</title>
</head>
<!-- have tried setting the right margin in body as well, impacts left side and content, but not right side of nav bar -->
<body>
<!--Using this first div as a wrapper. The padding means that the Text flow does not start right at the top which happens when you have a fixed element-->
<div style="padding-top: 0px; padding-bottom: 90px;">
<div class="mymenus">
<nav id="navbar_left">
<div>
<ul>
<li> Item One</li>
<li> Item Two</li>
<li> Item Three</li>
<li> Item Four</li>
</ul>
</div>
</nav>
<nav id="navbar_right">
<div>
<ul>
<li> Item One</li>
<li> Item Two</li>
<!-- <li> Item Three</li> -->
</ul>
</div>
</nav>
</div>>
</div>
<div class="mytext>">
<p>ipsum Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus sit repellendus dolorum corporis eius
adipisci quam! Voluptate cupiditate iure, rem molestiae corrupti odit nesciunt, culpa qui ut sequi quasi
eius?
</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam facere itaque libero magnam natus nobis eum
unde. Libero numquam, ab debitis animi cupiditate assumenda pariatur delectus et voluptatem at vel. Lorem
ipsum
dolor sit amet consectetur, adipisicing elit. Quis excepturi voluptates ratione cupiditate expedita iusto
magnam
possimus aspernatur labore exercitationem earum repudiandae, cumque quae quam in eos esse asperiores a?
Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima earum harum doloribus
quos
ut dolorum deleniti quam, tempora placeat sunt. Ad, culpa. Quam, expedita quisquam tenetur alias officia
ducimus
explicabo.
Nihil nam suscipit ab accusamus unde eos explicabo temporibus impedit, dolore voluptatibus et nulla ipsum,
rerum
eum amet enim dolor sint commodi asperiores deserunt consectetur provident. Sed unde nulla minima.
Quam unde illum quos! Cupiditate fugit debitis, blanditiis sapiente in similique maiores velit neque
repudiandae
officiis deleniti harum non tenetur nisi ea assumenda inventore numquam, necessitatibus illo. Quo,
reprehenderit
fuga?
Consequuntur, non! Nesciunt adipisci quibusdam nemo pariatur vero fugit voluptatem porro dignissimos sit est
ratione, exercitationem, odit corrupti magni blanditiis dolorem, deserunt repellat quas eius hic amet dicta!
Totam, consequuntur!
Suscipit earum, itaque dicta veniam vero, dolor in ipsa voluptatum facilis reprehenderit sed. Voluptates
quos
tenetur numquam, temporibus laboriosam ex consequuntur, nesciunt accusantium assumenda vel itaque, eius
minima
ad asperiores?
Accusantium nostrum, quo suscipit laboriosam nisi, perspiciatis beatae quibusdam, consectetur odit corporis
illum temporibus vero repellat sapiente in assumenda ab. Facere similique laborum odit neque explicabo
consectetur fuga ad quia.
Doloremque laudantium repellendus omnis amet quasi quisquam voluptatem inventore earum possimus,
exercitationem,
eius molestias officiis molestiae sed temporibus ea nisi. Asperiores dolore nam sint distinctio earum at
magni
voluptatem nobis.
Adipisci rem inventore, repellat autem recusandae aut quis molestiae non, consequuntur voluptate veniam!
Dolores, praesentium debitis. Sunt amet, atque voluptas similique quod vel, corporis laborum magni
consequuntur
dignissimos est iste?
Quam ex ratione assumenda repudiandae, suscipit eos id odio voluptate eum accusantium labore nihil optio quo
harum debitis laborum excepturi. Sed explicabo quibusdam obcaecati vero, aperiam sit earum. Officiis,
cumque!
Cumque nam odio exercitationem dignissimos similique facere magni maiores incidunt maxime ad explicabo,
dolor
recusandae tempore nihil dolore magnam repellendus dolorum eligendi libero esse labore sint aliquam minima.
Et,
atque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, suscipit. Aspernatur facilis fuga
adipisci! Sed aut est, culpa quae corporis repudiandae, iusto quas facere rem minima dolores accusantium
fugiat
alias!
Debitis odit corrupti id assumenda possimus, consequuntur inventore! Consequuntur eius tempore odio autem
laudantium, nihil architecto, molestiae aspernatur, ducimus itaque excepturi vitae? Suscipit animi officia
minima rem enim aspernatur modi.
Dignissimos tenetur ad recusandae repudiandae deserunt nihil commodi delectus labore, sint minima tempora,
sapiente illo. Quo consequatur vero nisi, nemo facilis natus numquam eos dicta repellat reprehenderit rerum
adipisci excepturi!
Beatae, molestiae quis quo veniam sint porro voluptatibus ullam labore voluptatem in consequatur quae vero
deleniti alias! Ab ipsa, quas soluta cumque voluptatibus velit odio? Obcaecati ex architecto ipsa quod.
Unde veniam quae aut corporis consequatur inventore explicabo dicta animi molestias. Debitis eius maiores
molestias, eveniet, adipisci qui autem cumque repellendus tempore laudantium quas eum dolore quis aliquid!
Eos,
magni.
Eligendi nam at debitis natus laboriosam nemo placeat quibusdam esse facere, nisi ratione doloremque fuga
sequi
magni nobis ipsam a, tempore odit dolorum? Esse odio illo veritatis doloremque error qui!
Odit perspiciatis velit nisi at ipsam nobis doloremque voluptates incidunt minus corporis sed ex deleniti
fugit,
repudiandae error quia consequatur, provident est reiciendis facere modi minima sunt temporibus nam.
Provident.
Inventore tenetur eaque est qui, perferendis magnam nihil doloremque omnis, nulla recusandae, eum voluptas
harum
cupiditate sint officia quidem non. Animi asperiores consequuntur autem earum quod minus aut sint non.
Qui tempore sapiente, ab, ipsa cupiditate porro id odit, harum nemo accusamus quisquam excepturi culpa.
Laboriosam, doloribus. A dolore unde non nesciunt sapiente necessitatibus quam, at assumenda itaque quia
deserunt?
In accusantium deserunt aspernatur. Sit eos doloremque quae non recusandae cupiditate, sequi quaerat, magni
quia
odit, culpa vero molestiae deleniti perferendis provident officia voluptatum quos temporibus dolorem maxime
dolores ad.
</p>
<p>ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae impedit voluptatibus soluta
reprehenderit.
Atque corporis odio nam repellat ratione nostrum placeat nobis, ex eaque eius ab earum consequuntur tenetur
corrupti.
Recusandae necessitatibus modi porro voluptas, quasi natus eaque nisi. Commodi est vitae accusantium. Dolor
officia provident dignissimos totam. Excepturi mollitia, omnis non illum iusto numquam quisquam deleniti
sequi
nam eius!
Fugit ab soluta non, corporis quisquam numquam minus incidunt similique hic necessitatibus repellat error
tempora, nam atque labore. Ab sequi magnam provident laudantium molestias, eius est inventore consequatur
consequuntur sed!
Exercitationem blanditiis accusantium nam commodi hic quos voluptatibus, reiciendis ea quae aspernatur alias
suscipit corporis odio quidem earum accusamus quia numquam eum temporibus eius libero fuga. Quasi
praesentium
modi itaque!</p>
</div>
</body>
</html>
Edit
Thank to both Nick and Haworth. The global heading were useful in cleaning up the layout and I understood the point about borders after playing around some more.
As far I can tell, 100vw/100% width + flex boxes + margins is just a bad combination!. It appears that stating 100% width and then adding in a margin or border makes the overall width go over 100% because as stated in the answers, they are outside the box.
So the solution appears to be leave the container alone(don't add any margins or padding ) and make the adjustment to the items within it to mask any issue or adjust the container size via a calculation.
A clearer head today plus better search terms also led me to this post:
StackExchange - flex items and margins

There are some useful settings which you often find at the start of CSS files. They do three things, set the margin and padding on all elements to start off as 0, overriding the defaults that browsers may use, and in addition set box sizing to border-box which means borders etc are counted within an element’s dimensions, not additional to it.
If we do this with your snippet you’ll see that the right hand border of your navbar is visible. The 70% plus 30% are doing what you wanted, including their borders.
<!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">
<style>
* {
margin:0;
padding: 0;
box-sizing: border-box;
}
.mymenus {
top: 0;
/* have tried various left/right/both margin combinations here */
display: inline-flex;
flex-direction: row;
height: max-content;
width: 100%; /* 100% makes the right edge disappear 99% is workaround. */
background: tomato; /* Not required - Just to see if background is showing */
border-style: double;
border: firebrick;
position: fixed;
}
ul {
font-family: sans-serif;
font-size: larger;
font-weight: bold;
list-style: none; /* Gets rid of the bullet points */
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: violet;
border-style: dotted;
justify-content: space-evenly; /* have to use justify content, not the text to get it to space evenly */
}
li {
border: solid yellow;
padding: 10px 20px 10px 10px; /* see impact of padding */
margin-bottom: 5px;
margin-top: 5px;
}
#navbar_left {
width: 70%;
background: lightcyan;
float: left;
}
#navbar_right {
width: 30%;
background: lightcyan;
float: right;
}
</style>
<title>SideBySide navbar</title>
</head>
<!-- have tried setting the right margin in body as well, impacts left side and content, but not right side of nav bar -->
<body>
<!--Using this first div as a wrapper. The padding means that the Text flow does not start right at the top which happens when you have a fixed element-->
<div style="padding-top: 0px; padding-bottom: 90px;">
<div class="mymenus">
<nav id="navbar_left">
<div>
<ul>
<li> Item One</li>
<li> Item Two</li>
<li> Item Three</li>
<li> Item Four</li>
</ul>
</div>
</nav>
<nav id="navbar_right">
<div>
<ul>
<li> Item One</li>
<li> Item Two</li>
<!-- <li> Item Three</li> -->
</ul>
</div>
</nav>
</div>>
</div>
<div class="mytext>">
<p>ipsum Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus sit repellendus dolorum corporis eius
adipisci quam! Voluptate cupiditate iure, rem molestiae corrupti odit nesciunt, culpa qui ut sequi quasi
eius?
</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam facere itaque libero magnam natus nobis eum
unde. Libero numquam, ab debitis animi cupiditate assumenda pariatur delectus et voluptatem at vel. Lorem
ipsum
dolor sit amet consectetur, adipisicing elit. Quis excepturi voluptates ratione cupiditate expedita iusto
magnam
possimus aspernatur labore exercitationem earum repudiandae, cumque quae quam in eos esse asperiores a?
Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima earum harum doloribus
quos
ut dolorum deleniti quam, tempora placeat sunt. Ad, culpa. Quam, expedita quisquam tenetur alias officia
ducimus
explicabo.
Nihil nam suscipit ab accusamus unde eos explicabo temporibus impedit, dolore voluptatibus et nulla ipsum,
rerum
eum amet enim dolor sint commodi asperiores deserunt consectetur provident. Sed unde nulla minima.
Quam unde illum quos! Cupiditate fugit debitis, blanditiis sapiente in similique maiores velit neque
repudiandae
officiis deleniti harum non tenetur nisi ea assumenda inventore numquam, necessitatibus illo. Quo,
reprehenderit
fuga?
Consequuntur, non! Nesciunt adipisci quibusdam nemo pariatur vero fugit voluptatem porro dignissimos sit est
ratione, exercitationem, odit corrupti magni blanditiis dolorem, deserunt repellat quas eius hic amet dicta!
Totam, consequuntur!
Suscipit earum, itaque dicta veniam vero, dolor in ipsa voluptatum facilis reprehenderit sed. Voluptates
quos
tenetur numquam, temporibus laboriosam ex consequuntur, nesciunt accusantium assumenda vel itaque, eius
minima
ad asperiores?
Accusantium nostrum, quo suscipit laboriosam nisi, perspiciatis beatae quibusdam, consectetur odit corporis
illum temporibus vero repellat sapiente in assumenda ab. Facere similique laborum odit neque explicabo
consectetur fuga ad quia.
Doloremque laudantium repellendus omnis amet quasi quisquam voluptatem inventore earum possimus,
exercitationem,
eius molestias officiis molestiae sed temporibus ea nisi. Asperiores dolore nam sint distinctio earum at
magni
voluptatem nobis.
Adipisci rem inventore, repellat autem recusandae aut quis molestiae non, consequuntur voluptate veniam!
Dolores, praesentium debitis. Sunt amet, atque voluptas similique quod vel, corporis laborum magni
consequuntur
dignissimos est iste?
Quam ex ratione assumenda repudiandae, suscipit eos id odio voluptate eum accusantium labore nihil optio quo
harum debitis laborum excepturi. Sed explicabo quibusdam obcaecati vero, aperiam sit earum. Officiis,
cumque!
Cumque nam odio exercitationem dignissimos similique facere magni maiores incidunt maxime ad explicabo,
dolor
recusandae tempore nihil dolore magnam repellendus dolorum eligendi libero esse labore sint aliquam minima.
Et,
atque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, suscipit. Aspernatur facilis fuga
adipisci! Sed aut est, culpa quae corporis repudiandae, iusto quas facere rem minima dolores accusantium
fugiat
alias!
Debitis odit corrupti id assumenda possimus, consequuntur inventore! Consequuntur eius tempore odio autem
laudantium, nihil architecto, molestiae aspernatur, ducimus itaque excepturi vitae? Suscipit animi officia
minima rem enim aspernatur modi.
Dignissimos tenetur ad recusandae repudiandae deserunt nihil commodi delectus labore, sint minima tempora,
sapiente illo. Quo consequatur vero nisi, nemo facilis natus numquam eos dicta repellat reprehenderit rerum
adipisci excepturi!
Beatae, molestiae quis quo veniam sint porro voluptatibus ullam labore voluptatem in consequatur quae vero
deleniti alias! Ab ipsa, quas soluta cumque voluptatibus velit odio? Obcaecati ex architecto ipsa quod.
Unde veniam quae aut corporis consequatur inventore explicabo dicta animi molestias. Debitis eius maiores
molestias, eveniet, adipisci qui autem cumque repellendus tempore laudantium quas eum dolore quis aliquid!
Eos,
magni.
Eligendi nam at debitis natus laboriosam nemo placeat quibusdam esse facere, nisi ratione doloremque fuga
sequi
magni nobis ipsam a, tempore odit dolorum? Esse odio illo veritatis doloremque error qui!
Odit perspiciatis velit nisi at ipsam nobis doloremque voluptates incidunt minus corporis sed ex deleniti
fugit,
repudiandae error quia consequatur, provident est reiciendis facere modi minima sunt temporibus nam.
Provident.
Inventore tenetur eaque est qui, perferendis magnam nihil doloremque omnis, nulla recusandae, eum voluptas
harum
cupiditate sint officia quidem non. Animi asperiores consequuntur autem earum quod minus aut sint non.
Qui tempore sapiente, ab, ipsa cupiditate porro id odit, harum nemo accusamus quisquam excepturi culpa.
Laboriosam, doloribus. A dolore unde non nesciunt sapiente necessitatibus quam, at assumenda itaque quia
deserunt?
In accusantium deserunt aspernatur. Sit eos doloremque quae non recusandae cupiditate, sequi quaerat, magni
quia
odit, culpa vero molestiae deleniti perferendis provident officia voluptatum quos temporibus dolorem maxime
dolores ad.
</p>
<p>ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae impedit voluptatibus soluta
reprehenderit.
Atque corporis odio nam repellat ratione nostrum placeat nobis, ex eaque eius ab earum consequuntur tenetur
corrupti.
Recusandae necessitatibus modi porro voluptas, quasi natus eaque nisi. Commodi est vitae accusantium. Dolor
officia provident dignissimos totam. Excepturi mollitia, omnis non illum iusto numquam quisquam deleniti
sequi
nam eius!
Fugit ab soluta non, corporis quisquam numquam minus incidunt similique hic necessitatibus repellat error
tempora, nam atque labore. Ab sequi magnam provident laudantium molestias, eius est inventore consequatur
consequuntur sed!
Exercitationem blanditiis accusantium nam commodi hic quos voluptatibus, reiciendis ea quae aspernatur alias
suscipit corporis odio quidem earum accusamus quia numquam eum temporibus eius libero fuga. Quasi
praesentium
modi itaque!</p>
</div>
</body>
</html>

The left and right nav bars combined take up 100% of the screen. The border is on the outside of the nav bars. The border takes up slightly more room. An example: border: 500px solid black
The above code will take up 500px outside of it's element on all four sides. The only difference between margin and border is with margin you can have a different value on all four sides of the element and with border the value is the same on all four sides.
In conclusion if you desire to fit the border on the screen consistently use a global constant like vw(view width) for the nav width and the border size.Or you could change left to 70% and right to 29% like you did. The only problem with this is that theoretically if the screen got small enough the border on the right wouldn't be on the screen. But it is unlikely that the screen will ever get that small.

How to fix the sidebar and body sections on the same row?

I want the body section to scroll all the way up, with the sidebar section to the top of the screen, through multiple trial-and-error, the sidebar can do that, but the content section goes back to the bottom. I want when entering that page that the content and sidebar are aligned. Did I overlook where?
<style>
/* The side navigation menu */
.sidebar {
margin: 0;
padding: 0;
width: 230px;
background-color: #f1f1f1;
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 0 15px;
}
</style>
sidebar section
<div class="sidebar">
sidebar
sidebar
sidebar
</div>
content section
<div class="content">
<div class="col-12" id="main">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h1">content</h1>
</div>
<div class="card border-success">
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto voluptatem, soluta error at sequi cum veniam dolorem obcaecati ratione sunt accusamus saepe fugiat ipsam modi reiciendis facilis illum necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus eveniet ab sed cumque repudiandae qui assumenda, aut quibusdam libero similique voluptatibus dolor dolorem fugiat explicabo? Quia illum illo maxime modi?</p>
</div>
</div>
</div>

You can use flexbox to get the desired result.
Here's an example:
.wrapper {
display: flex;
justify-content: space-between;
}
.sidebar {
position: sticky;
top: 0;
width: 230px;
height: 100vh;
}
.content {
width: 900px;
padding: 0 10px;
}
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Sunt, accusamus repudiandae.</li>
<li>Cumque, vitae ut.</li>
<li>Officiis, a esse.</li>
<li>Soluta, maiores commodi.</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde quis quas ut enim corrupti error, alias praesentium assumenda cum iure nam ipsum recusandae sint facilis quia cupiditate obcaecati tempore maxime ea qui vel eveniet eius nulla ad. Nemo
cum repellat eum eos placeat. Repellendus autem sapiente maiores error officia maxime qui neque illo nemo magnam?</p>
<p>Delectus quae ipsa quos aliquam officia. Error facere perspiciatis veritatis, doloremque nisi nesciunt quaerat cumque repellendus nam cum minus ratione. Culpa repudiandae at, perspiciatis ad ea ducimus minima molestiae rerum aut laudantium non, placeat
exercitationem saepe, impedit velit tempore distinctio illum? Libero cumque a illum perspiciatis, praesentium ea tempore dolor ducimus, consequuntur veniam aut ipsa?</p>
<p>Omnis, fuga asperiores in, dolorum optio facilis ea eaque ad dolor quidem, harum magnam nisi? Voluptate deserunt et, pariatur eum similique ab ex quisquam rem, possimus nemo eius! Veritatis, deleniti dolorum ex eveniet eaque aut rerum, exercitationem
in quisquam, adipisci explicabo provident quae non praesentium fugiat. Molestias laudantium obcaecati animi aliquam corrupti delectus iste rem.</p>
<p>Nobis aliquam cum commodi, nesciunt suscipit nemo hic reiciendis ullam doloribus distinctio consequatur, neque totam. Esse atque soluta, necessitatibus minus debitis illum error, provident totam quam quae tempore, blanditiis nobis! Eligendi dolor
illum error fuga ex distinctio. Quibusdam, omnis modi ratione consectetur, porro doloremque inventore dolorem dolores perspiciatis neque cupiditate iusto dolore voluptas blanditiis autem.</p>
<p>Impedit id eius rerum optio? Similique repellat optio nostrum, ratione maiores aperiam et. Obcaecati, iste. Saepe eligendi libero recusandae repellat, commodi ab placeat id nobis aliquam neque dolorum ipsa minima harum pariatur eaque reiciendis assumenda
perferendis animi officia! Maiores totam et quia, nulla libero odio accusantium voluptatibus, maxime, perspiciatis porro rerum dolores eaque veritatis officia!</p>
<p>Reprehenderit ducimus, saepe omnis, vel deserunt maiores nostrum similique dolorem dolorum libero nisi iste repellat ullam odit, veritatis est officiis ut adipisci fuga eius illo necessitatibus esse ratione doloremque. Accusamus neque inventore dicta
ipsa iusto ex debitis labore est, adipisci odit suscipit repellendus sit atque aliquid omnis provident explicabo minima necessitatibus sapiente nobis ratione quam.</p>
<p>Velit, consectetur veritatis et non sunt corporis repellendus totam saepe nihil voluptate exercitationem dignissimos in corrupti culpa, excepturi necessitatibus vitae fugiat. Exercitationem dolores voluptas, numquam ea libero voluptatem consequuntur
necessitatibus quia iusto quam, aperiam repellendus molestias nobis sapiente. Corrupti autem nemo commodi maxime libero assumenda nulla, animi modi alias, consequatur facilis cumque accusantium sapiente architecto!</p>
</div>
</div>

Adjusting Paragraph Layout

Hello I've just started learning and I'm trying to build a layout on HTML5 but I don't exactly understand how can I put the paragraph to the place I want. For example, I'm floating some paragraphs to the left and then floating some other paragraphs to the right but it turns out like this:
I want purple and green paragraphs to be on the left and the rest to be on the right.
.hersey {
width: 1140px;
margin-left: auto;
margin-right: auto;
}
.ilk {
background-color: darkmagenta;
float: left;
}
.iki {
background-color: green;
float: left;
}
.thr {
background-color: hotpink;
float: right;
}
.author {
background-color: yellow;
}
<div class="hersey">
<div class="ilk">
<h1>Document</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, consequuntur? Suscipit qui, molestiae beatae non eaque id, vitae nesciunt in eveniet voluptatibus natus molestias quis.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis adipisci possimus illum quidem nulla, dolores omnis est quibusdam commodi, qui hic expedita blanditiis repellat reprehenderit doloribus iure suscipit, molestias placeat et rem dignissimos
cum sint! Consequatur dignissimos laboriosam beatae dolor ut a, necessitatibus corporis quidem quas? Dicta excepturi dolore ipsam dignissimos, amet blanditiis libero illum, voluptate vero temporibus laudantium fuga illo aperiam exercitationem! Voluptatum,
aliquid vero cupiditate, eveniet quasi velit nisi architecto quis eaque magni, iure adipisci sint perferendis similique!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi laborum dignissimos corporis omnis earum hic illum sint. Qui sequi dolor hic eos ad labore dolorum repellendus recusandae, officiis excepturi in laudantium ullam ratione neque ipsam ea
minima vero numquam tempore perferendis. Aliquam asperiores temporibus quaerat molestiae id adipisci. Officiis impedit, explicabo nam eligendi possimus cumque ipsa nobis omnis, rem, natus reprehenderit minus in veritatis qui? Temporibus iure, doloremque
reprehenderit, voluptate tenetur assumenda quas, incidunt repudiandae minus recusandae ratione minima. Cum commodi itaque voluptatibus odit quisquam minus obcaecati consequuntur ex consequatur?</p>
</div>
<div class="iki">
<h2>Other Documents For U</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, sed? Est quaerat corrupti aspernatur eos quae sequi magni esse labore magnam, impedit neque cupiditate incidunt asperiores. Facere quas temporibus quos numquam maxime eius aliquid alias
earum! Necessitatibus illo aut molestiae id repudiandae laboriosam, totam ipsa, ut debitis qui libero odit suscipit dolorem, porro perspiciatis nemo veritatis similique reiciendis ex? Dolore qui, eos, quisquam voluptas voluptates earum suscipit
quas sequi ad et iusto quasi corrupti ipsam labore non natus, odit architecto aperiam a tempora quidem quae obcaecati consequuntur! Est, incidunt obcaecati? Corrupti, fugiat nostrum nemo recusandae rem tempora vel reprehenderit, itaque natus consequatur
at possimus eius dolorum magnam cum, impedit mollitia maxime delectus repudiandae qui. Quae natus quibusdam illum aliquid cum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias corrupti autem? Nostrum commodi reprehenderit laudantium quam dolores deserunt officia obcaecati error quo atque, sunt inventore, iusto accusantium repellendus ipsam animi aliquam.
Accusamus eum, reprehenderit harum corrupti magni, cumque vitae reiciendis quod, enim consequatur ipsum molestias totam quis! Non, earum necessitatibus fuga velit nostrum eius fugiat minima vero eos, voluptatum praesentium vel iure dolorum cupiditate
libero veritatis quo illum tempore! Qui nesciunt necessitatibus dignissimos dolorem ea dolor neque nam tempora officiis numquam dolorum aliquam aspernatur eum deserunt sed alias error eos, voluptatem odit nemo, possimus incidunt repellendus sint
placeat. Fugit sequi provident, ipsam possimus inventore fuga facilis tempore, illum quis!</p>
</div>
<div class="thr">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="author">
<h4>Writer</h4>
<p>Babark17</p>
<p><img src="me2.jpg" alt=""></p>
</div>
Appreciate your help, I know it's a beginners question but I really couldn't understand how to do it.

I think you're looking for the text-align propriety in CSS.
Simply, text-align: right; puts an element's contents into the right, don't use float: right because it doesn't do that for the contents.
Here's your code:
.hersey {
width: 1140px;
margin-left: auto;
margin-right: auto;
}
.ilk {
background-color: darkmagenta;
text-align: left;
}
.iki {
background-color: green;
text-align: left;
}
.thr {
background-color: hotpink;
text-align: right;
}
.author {
background-color: yellow;
width: 100%;
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<div class="hersey">
<div class="ilk">
<h1>Document</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, consequuntur? Suscipit qui, molestiae beatae non eaque id, vitae nesciunt in eveniet voluptatibus natus molestias quis.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis adipisci possimus illum quidem nulla, dolores omnis est quibusdam commodi, qui hic expedita blanditiis repellat reprehenderit doloribus iure suscipit, molestias placeat et rem dignissimos cum sint! Consequatur dignissimos laboriosam beatae dolor ut a, necessitatibus corporis quidem quas? Dicta excepturi dolore ipsam dignissimos, amet blanditiis libero illum, voluptate vero temporibus laudantium fuga illo aperiam exercitationem! Voluptatum, aliquid vero cupiditate, eveniet quasi velit nisi architecto quis eaque magni, iure adipisci sint perferendis similique!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi laborum dignissimos corporis omnis earum hic illum sint. Qui sequi dolor hic eos ad labore dolorum repellendus recusandae, officiis excepturi in laudantium ullam ratione neque ipsam ea minima vero numquam tempore perferendis. Aliquam asperiores temporibus quaerat molestiae id adipisci. Officiis impedit, explicabo nam eligendi possimus cumque ipsa nobis omnis, rem, natus reprehenderit minus in veritatis qui? Temporibus iure, doloremque reprehenderit, voluptate tenetur assumenda quas, incidunt repudiandae minus recusandae ratione minima. Cum commodi itaque voluptatibus odit quisquam minus obcaecati consequuntur ex consequatur?</p>
</div>
<div class="iki">
<h2>Other Documents For U</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, sed? Est quaerat corrupti aspernatur eos quae sequi magni esse labore magnam, impedit neque cupiditate incidunt asperiores. Facere quas temporibus quos numquam maxime eius aliquid alias earum! Necessitatibus illo aut molestiae id repudiandae laboriosam, totam ipsa, ut debitis qui libero odit suscipit dolorem, porro perspiciatis nemo veritatis similique reiciendis ex? Dolore qui, eos, quisquam voluptas voluptates earum suscipit quas sequi ad et iusto quasi corrupti ipsam labore non natus, odit architecto aperiam a tempora quidem quae obcaecati consequuntur! Est, incidunt obcaecati? Corrupti, fugiat nostrum nemo recusandae rem tempora vel reprehenderit, itaque natus consequatur at possimus eius dolorum magnam cum, impedit mollitia maxime delectus repudiandae qui. Quae natus quibusdam illum aliquid cum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias corrupti autem? Nostrum commodi reprehenderit laudantium quam dolores deserunt officia obcaecati error quo atque, sunt inventore, iusto accusantium repellendus ipsam animi aliquam. Accusamus eum, reprehenderit harum corrupti magni, cumque vitae reiciendis quod, enim consequatur ipsum molestias totam quis! Non, earum necessitatibus fuga velit nostrum eius fugiat minima vero eos, voluptatum praesentium vel iure dolorum cupiditate libero veritatis quo illum tempore! Qui nesciunt necessitatibus dignissimos dolorem ea dolor neque nam tempora officiis numquam dolorum aliquam aspernatur eum deserunt sed alias error eos, voluptatem odit nemo, possimus incidunt repellendus sint placeat. Fugit sequi provident, ipsam possimus inventore fuga facilis tempore, illum quis!</p>
</div>
<div class="thr">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="author">
<h4>Writer</h4>
<p>Babark17</p>
<img src="me2.jpg" alt="">
</div>
</div>
</body>
</html>
A living demo: https://codepen.io/marchmello/pen/zYvxbdO

Bootstrap Grid System not displaying in columns

I want to have three columns of text appear on the screen and a jumbotron like
this. When I run the site, I just get a jumbotron at the top, and then three rows of text each taking up 100% of the page width. How do I get bootstrap to turn the divs into a proper grid layout? I have tried putting other rows inside like some tutorials said to do, but they all failed. Any ideas how I could achieve a working grid layout?
.jumbotron {
padding: 30px 10px;
background-color: #d8d8d8;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lorem ipsum dolor sit.</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor.</h1>
<h3>Lorem ipsum dolor sit amet, consectetur.</h3>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quas neque, alias repudiandae autem. Laudantium commodi ratione qui facere similique consequatur repudiandae, fugit odio incidunt soluta nihil dicta quasi animi, laboriosam fuga pariatur
possimus vel. Ex odit repellat commodi temporibus perspiciatis neque, iste, rem eaque, ipsum vel inventore sunt facere assumenda cum modi ea facilis quisquam adipisci sed nihil dolores nesciunt expedita. Magnam iusto ad a cupiditate corporis
provident at, asperiores eum aliquid adipisci soluta quidem debitis numquam. Vel fuga omnis ea, rem quidem voluptatibus inventore expedita repudiandae quaerat voluptatem, at autem tempore aperiam, suscipit consequatur similique aspernatur laudantium
consequuntur!
</p>
</div>
<div class="col-md-6">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores, dolore. Distinctio, quia, dolor dolore cumque veritatis consequatur perferendis aliquam soluta beatae aperiam odit praesentium animi omnis reprehenderit ullam ea deserunt
consequuntur totam. Aperiam debitis labore vero perferendis fuga in quas dolore, odio amet, incidunt, quidem natus eos blanditiis ad dolores fugiat minima ut iste ullam totam ducimus assumenda asperiores, voluptate vitae cumque? Inventore laboriosam
ducimus culpa tempore eligendi voluptatibus optio, placeat eum necessitatibus blanditiis rem voluptates ea illum beatae architecto minima, autem saepe quibusdam expedita dolorum. Maiores at deserunt laboriosam ab dolorum libero, suscipit ullam
veniam ipsum non minima, aperiam, commodi rerum! Magnam dignissimos magni optio porro minus, deserunt totam sequi, voluptas doloremque voluptatibus est, aperiam unde repellendus vel odit facere ipsam velit consequuntur praesentium cumque ea,
quisquam natus. Dicta reiciendis voluptas, facere placeat in fugit perspiciatis architecto totam harum ducimus quisquam nemo, sapiente natus praesentium esse nihil inventore distinctio minus molestiae possimus earum ea tenetur? A velit, dicta
eaque iste explicabo aliquid, aspernatur animi atque at totam voluptatum vel maxime voluptas error libero rerum quam voluptatem porro deleniti perferendis ab commodi vitae. Veniam ad, vero voluptatem exercitationem ex dolor voluptatum, aperiam
cupiditate dolore hic officiis quasi modi. Hic dolore temporibus, tenetur, obcaecati facere quos similique nesciunt amet tempora fugiat incidunt dolorem placeat minus totam recusandae laborum, cum exercitationem aliquid sunt fugit iure ab. Maxime,
itaque aliquid? Non repellendus unde id. Vel reiciendis omnis doloremque molestiae necessitatibus incidunt voluptatum eveniet repellat enim perspiciatis itaque at dolorem tempore alias error, repellendus nulla quia corrupti cupiditate. Obcaecati
delectus saepe error cumque ex, deleniti tenetur necessitatibus beatae at quis fugiat vitae natus laboriosam aperiam eveniet reiciendis ipsa repudiandae. Necessitatibus maiores unde eveniet aspernatur autem eligendi soluta non iure, molestiae
repudiandae quisquam, id quaerat sint. Autem at architecto eligendi aut voluptatem voluptatibus vitae accusantium quod assumenda consectetur libero eveniet recusandae, consequuntur repudiandae id suscipit unde nulla delectus eum sed, neque enim
ipsam. Optio nesciunt dolorum iure omnis aspernatur. Recusandae est aut sit delectus minima repellat nisi dolorem impedit velit deserunt optio magni, laboriosam accusamus facilis veritatis perspiciatis similique quia eius explicabo. Veniam odio
corporis rem nemo, sunt quod asperiores adipisci aut tempore architecto quo sapiente ex ad nisi et vitae amet deleniti corrupti, nesciunt doloribus unde repellat. Libero sint quod ab amet natus, non assumenda sit magnam, similique, itaque ratione
soluta nobis! Natus laborum nobis necessitatibus nihil veniam eveniet quos beatae repellendus saepe!
</h5>
</div>
<div class="col-md-3">
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum aperiam incidunt ducimus officia! Quos dolorem iure fugit eligendi a omnis totam modi molestias eaque natus, deleniti eum! Veniam accusamus laborum optio neque corporis ut obcaecati
saepe facilis, deserunt. Maiores perferendis architecto incidunt sequi nesciunt quia blanditiis a voluptatum nam nemo unde hic facere cumque ex pariatur dicta, culpa neque eum minus! Facere similique facilis dolor vitae adipisci molestias sapiente
eaque temporibus, libero quam, excepturi labore. Ratione deleniti id ut quo magni facilis optio repudiandae, sed. Minima itaque recusandae, doloremque minus sit veniam? Odio nesciunt vero reiciendis soluta possimus aspernatur totam autem magnam
blanditiis eos impedit animi veniam harum saepe aliquam, modi tenetur cum? Esse iusto similique, perspiciatis quod eum voluptatibus doloribus, labore asperiores tempore! Inventore deleniti eum minima nam corporis eius doloribus labore perferendis
a cum, enim molestiae odit cumque qui, distinctio. Ab fuga ipsa nostrum, doloribus aspernatur, quaerat, possimus quis corrupti ducimus ullam officia inventore. Itaque, iure, ut. Enim odit vel cupiditate accusamus aliquid recusandae consequatur
officia nesciunt, beatae nam. Culpa eos ratione aliquid dolorem nostrum minima, tenetur mollitia animi laboriosam at iusto placeat alias, officiis explicabo veniam inventore, doloremque odit. Doloribus et sint dolores. Rem consequuntur sed ratione!</h6>
</div>
</div>
</div>
<div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</div>
</body>
</html>

.container comes first.
Then the .row.
And then columns .col.
Don't ever put a Bootstrap container inside a row.