When I scale my site down or view on mobile/tablet, there is all of this margin/whitespace on right side and it cuts off text content in #main section. Why is this happening and how can I make it all scale correctly? I have tried overflow hidden on various parts which didn't solve anything and I have tried zeroing out margins and messing with padding. I'm unsure how to make it scale correctly and get rid of that extra margin/space on the right. There isnt much yet, only header, nav and #main section.
Thank you for your help in advance
html:
<body>
<header id="main-header">
<div class="container">
<h1 class="display-4">.Richardson</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul class="my-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="main">
<div class="container">
<div class="col-md-8" id="welcome-text">
<h1 class="display-4">Welcome</h1>
<hr class="rule">
<p><cite>"Discipline is the bridge between goals and accomplishments" ~ Jim Rohn</cite></p>
<p>Hey, I'm <span style="font-size: 24px; color: #FFFC31"><strong>Name!</strong></span> Congratulations on joining me in my path to becoming a highly valued, self-taught <span style="font-size: 24px; color:#FFFC31"><strong>Front-End Web Developer</strong></span>. My journey began with <span style="font-size: 24px; color: #FFFC31"><strong>Free Code Camp</strong></span> and the <span style="font-size: 24px; color: #FFFC31"><strong>Code Academy,</strong></span> as well as many youtube tutorials. I've learned <span style="font-size: 24px; color: #FFFC31"><strong>HTML, CSS and Javascript</strong></span> basics thus far. I aspire to put my coding skills to use by adding value and making a difference. Continually challenging myself and improving my craft. <span style="font-size: 24px; color: #FFFC31"><strong>I'm passionate</strong></span> about Nature, animals, traveling, serving the community, maintaining a healthy mind, body and spirit, and enjoying great food and craft beer with great people.</p>
</div>
</div>
</section>
<section>
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
</section>
css:
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin:auto;
overflow: hidden;
}
img {
min-width: 100%;
margin: 0;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Helvetica", "geneva", sans-serif;
}
p {
font-family: sans-serif;
font-size: 1.3rem;
line-height: 2.5rem;
}
a {
color: #4e0250;
}
a:hover {
text-decoration: none;
background-color: gray;
padding: 10px;
color: #D3D3D3;
border-radius: 20px;
}
#main-header {
background: #4E0250;
color: silver;
text-align: center;
position: sticky;
top: 0;
right: 0;
z-index: 1;
}
#navbar {
text-align: center;
background-color: #D3D3D3;
color: #4e0250;
font-size: 1.4rem;
z-index: 1;
}
#navbar ul {
padding-left: 65px;
}
#navbar ul li {
text-align: center;
list-style: none;
padding-right: 40px;
display: inline;
}
#navbar {
position: fixed;
width: 100%;
}
#navbar .my-nav {
margin: 15px;
}
#main {
padding-top: 5rem;
background: url('../img/headon3.jpg') center center no-repeat;
background-size: cover;
min-height: 757px;
overflow: hidden;
}
#main .container {
margin-top: 55px;
margin-left: 150px;
}
#main #welcome-text {
background-color: rgba(92, 92, 92, 0.9);
color: #D3D3D3;
padding: 0 20px;
border-radius: 10%;
padding-bottom: 5px;
min-width: 40%;
}
#main h1 {
padding-top: 20px;
}
.rule {
border-top: 1px solid floralwhite;
padding-bottom: 10px;
}
Your main issue is you're not letting bootstrap take care of margins padding with rows and columns properly. In order to fix this immediate issue you have two problems:
First,
http://getbootstrap.com/docs/3.3/css/#grid-media-queries
#main .container {
margin-top: 55px;
margin-left: 150px;
}
Is getting in the way. Let the .container class take care of itself. It uses media queries to accurately define the margin-left at different widths. What you've done here is hard code it to always be 150px, and on an iphone that is most of the screen.
Second,
http://getbootstrap.com/docs/3.3/css/#grid
Container > rows > columns.
You are missing a row class here:
<div class="container">
<div class="row">
<div class="col-md-8" id="welcome-text">
Related
I need help getting the header title (h2,h3,h4) region always appear in the top right corner of their respective div region, no matter what view is being displayed.
Also, the header content keeps overflowing as I shrink the web browser, how can I stop that from running over?
I tried moving the margins and the padding of the header, and the header won't move to the right past 350px.
I tried to adjust the size of the div to allow the header to move top right.
Should I have used the "section element" instead of div?
I haven't tried using absolute or relative positioning.
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2,
h3,
h4 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
max-width: 30%;
margin-bottom: 5px;
position: relative;
bottom: 11px;
left: 231px;
}
h2 {
background-color: Pink;
color: black;
}
h3 {
background-color: red;
color: white;
}
h4 {
background-color: greenyellow;
color: black;
}
div {
background-color: lightgray;
padding: 10px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
margin-bottom: 10px;
max-width: 400px;
position: relative;
}
/*Large devices*/
#media (min-width: 992px) {
.box1 {
float: left;
margin-left: 20px;
margin-right: 60px;
max-width: 30%
}
.box2 {
float: left;
max-width: 30%;
}
.box3 {
float: right;
max-width: 30%;
margin-right: 20px;
}
h2,
h3,
h4 {
position: relative;
left: 70.2%;
}
}
/*Medium devices*/
#media (min-width: 768px) and (max-width:991px) {
.box1 {
float: left;
max-width: 43%;
margin-bottom: 30px;
margin-left: 40px;
margin-right: 0px;
}
.box2 {
float: right;
max-width: 43%;
margin-bottom: 30px;
margin-right: 40px;
}
.box3 {
margin-top: 40px;
clear: both;
max-width: 100%;
margin-left: 40px;
margin-right: 40px;
}
h2,
h3,
h4 {
position: relative;
left: 70.2%;
}
}
}
/*small devices*/
#media (max-width:767px) {
div {
margin-top: 30px;
}
h2,
h3,
h4 {
position: relative;
left: 100%;
}
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="box1">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box2">
<h3>Pizza</h3>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box3">
<h4>Salads</h4>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</body>
</html>
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2,
h3,
h4 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
max-width: 30%;
margin-left: 310px;
margin-bottom: 5px;
margin-top: 0px;
padding: 0px;
}
h2 {
background-color: Pink;
color: black;
}
h3 {
background-color: red;
color: white;
}
h4 {
background-color: greenyellow;
color: black;
}
div {
background-color: lightgray;
padding: 10px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
margin-bottom: 10px;
max-width: 400px;
}
/*Large devices*/
#media (min-width: 992px) {
.box1 {
float: left;
margin-left: 20px;
margin-right: 60px;
max-width: 30%
}
.box2 {
float: left;
max-width: 30%;
}
.box3 {
float: right;
max-width: 30%;
margin-right: 20px;
}
}
/*Medium devices*/
#media (min-width: 768px) and (max-width:991px) {
.box1 {
float: left;
max-width: 43%;
margin-bottom: 30px;
margin-left: 40px;
margin-right: 0px;
}
.box2 {
float: right;
max-width: 43%;
margin-bottom: 30px;
margin-right: 40px;
}
.box3 {
margin-top: 40px;
clear: both;
max-width: 100%;
margin-left: 40px;
margin-right: 40px;
}
}
/*small devices*/
#media (max-width:767px) {
div {
margin-top: 30px;
}
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="box1">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box2">
<h3>Pizza</h3>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box3">
<h4>Salads</h4>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</body>
</html>
So, a few things to go over:
First off, you don't need to use different heading tags for the same hierarchical elements. You already have your first heading as your title, and since you don't have anything that follows you can stick with just <h2> from there.
We can use CSS specificity to target your various headings to change the colors as you prefer. You could also have done this with ids, classes, really there are several ways to approach any layout in CSS; this is just what I chose for simplicity.
floats are very outdated and have been replaced by flex-box techniques which we're going to use to position your headers on your menu items. Could we use position attributes? Sure. But if we're using flex already, we can take advantage of what it's capable of to position elements using a container element to house all of your items and then make the items themselves utilize flex as well.
We can use align-self: flex-end; to position your <h2> tags as needed and then add some margin to give them some breathing room away from the edges of the menuItems.
There's much more that can be done here, but I think this cleans it up quite nicely and you get a much simpler, more easily-responsive layout with less code and less attributes.
Hopefully, that covers everything. Let me know if you have any questions! Thanks for updating your post after my comment. Make sure to keep that in mind moving forward ;)
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
.container {
display: flex;
flex-direction: row;
background: transparent;
width: 100vw;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
}
.menuItem {
display: flex;
flex-direction: column;
background-color: lightgray;
padding: 0px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
flex: 1 1 32%;
min-width: 400px;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
border-top: 0px;
border-right: 0px;
align-self: flex-end;
padding: 5px 20px;
}
.container .menuItem:nth-child(1) h2 {
background-color: Pink;
color: black;
}
.container .menuItem:nth-child(2) h2 {
background-color: red;
color: white;
}
.container .menuItem:nth-child(3) h2 {
background-color: greenyellow;
color: black;
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="container">
<div class="menuItem">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="menuItem">
<h2>Pizza</h2>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="menuItem">
<h2>Salads</h2>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</div>
</body>
</html>
I am trying to make a vertical navigation bar. I have made a navbar.I want to set it's height to full page but i am not able to do that even when is set height:100% in CSS. I want content like para to be displayed on its left side.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
background-color: grey;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
pos
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
div {
display: inline;
}
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
I tried to change the display: parameter of the unordered list to display:inline and also the display: parameter of div tag to display:inline How do I set the height to full page and also display content on its left side.
When you use height:100%; it means that you want that element to be 100% of its parent which in your case is body, and as height is not defined for it so it is auto. all you need to do is to add min-height:100vh for the body. It will solve your problem for full height navbar.
Now your next objective is to make the text to wrap around it, which can achieved by floating your navbar to left. This will make the next elements to wrap around it.
Setting div to display:inline; won't be a good thing to do just for achieving this result, because the moment you add next div it will start creating problems.
body {
margin: 0;
height: 100vh;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
background-color: grey;
float: left;
margin-right: 10px;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
<body>
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
</body>
My suggestion is to use Bootstrap or for understanding you can do it like this also:
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 20vw;
height: 100%;
background-color: grey;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
pos
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
div {
display: inline;
}
</style>
</head>
<body>
<div style="float: left; width: 20vw;">
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div style="float: right;width: 75vw">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
</div>
</body>
</html>
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 1 year ago.
Div with class name main goes to the next line. I don't need it. It's wrong. I've vertical navbar with display block. I don't know why it goes to the next line.
Here's HTML code:
/* Nav */
nav {
padding-left: 30px;
padding-top: 30px;
height: 100vw;
width: 290px;
border-right: 1px solid #333333;
}
.nav__link {
color: #FFFFFF;
width: 250px;
display: block;
border-radius: 8px;
padding: 6px 0px 6px 30px;
transition: background-color .2s linear;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
margin-top: 20px;
}
.nav__link:hover {
background-color: #707070;
}
/* Main */
.main {
margin-left: 300px;
}
<!-- Nav -->
<nav>
Project 1
Project 2
Project 3
Project 4
</nav>
<!-- Main -->
<div class="main">
<div class="project">
<h1 class="project__name">Project 1</h1>
<p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
</div>
</div>
Any ideas to solve this problem, guys?
Add display: flex; to their parent, which is currently <body>:
body {
display: flex;
}
block elements take up entire width, so nav will push the <div> to next line by default.
Side note: I recommend using more semantic elements like <aside> and <main>
/* Nav */
body {
display: flex;
}
nav {
padding-left: 30px;
padding-top: 30px;
height: 100vw;
width: 290px;
border-right: 1px solid #333333;
background: grey;
}
.nav__link {
color: #FFFFFF;
width: 250px;
display: block;
border-radius: 8px;
padding: 6px 0px 6px 30px;
transition: background-color .2s linear;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
margin-top: 20px;
}
.nav__link:hover {
background-color: #707070;
}
/* Main */
main {
margin-left: 300px;
}
<aside>
<nav>
Project 1
Project 2
Project 3
Project 4
</nav>
</aside>
<!-- Main -->
<main>
<div class="project">
<h1 class="project__name">Project 1</h1>
<p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
</div>
</main>
I'am triyng to make Link A,B goes inside to Left element (green box), and Link C,D goes inside to Right element (yellow box), wrapped by container.
As the picture show, also i managed placing Link C,D on the right side using CSS position: absolute; right: 0;
but when i using position: absolute; left: 0;for Link A,B this link is not on the left side aligned to upper elements
Picture
this is my code:
<head>
<style>
.container {
width: 1000px;
border: 3px solid black;
margin: auto;
padding: 16px;
}
.left, .right { width: 400px; }
.left {
background-color: #197b30;
float: left;
color: white;
font-style: italic;
text-align: left;
position: relative;
}
.left span {
font-weight: bold;
font-size: large;
font-style: normal;
text-decoration-line: underline;
}
.left ul {
color: rgb(243, 9, 126);
list-style-type: disc;
position: absolute;
left: 0;
}
.left a { color: #ff0000}
.right a { color: #ff0000}
.right {
background-color: #fff200;
float: right;
color: black;
font-style: italic;
text-align: right;
position: relative;
}
.right span {
font-weight: bold;
font-size: large;
font-style: normal;
text-decoration-line: underline;
}
.right ul {
color: rgb(243, 9, 126);
list-style-type: disc;
position: absolute;
right: 0;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p><span>This is a left paragraph</span</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel, aperiam odit
nostrum,
reprehenderit temporibus reiciendis aliquam maxime sunt qui quos eligendi sequi unde,
quas molestiae explicabo quod harum veniam alias.</p>
<p><span>This is a left link</span></p>
<ul>
<li>Left Link A</li>
<li>Left Link B</li>
</ul>
</div>
<div class="right">
<p><span>This is a right paragraph</span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi incidunt
necessitatibus adipisci eum harum, culpa, amet voluptate cumque molestias quos
earum
asperiores hic debitis iure iste porro? Fugit, itaque quo.</p>
<p><span>This is a right link</span></p>
<ul>
<li>Right Link C</li>
<li>Right Link D</li>
</ul>
</div>
<div class="clear"></div>
</div>
When you are using the ul element there's a default padding on the left hand side of every li element.
Try this:
.left ul {
color: rgb(243, 9, 126);
list-style-type: disc;
position: absolute;
left: 0;
padding: 0; /* Add this */
}
That removes the padding and will position the navigation as you expect.
I'm trying to move this div to the left under the title, but I cant seem to do it with text-align or justify content, those are my usual methods for centering. However, I want this div to move to the left.
my problem
.grid-container {
max-width: 90vw;
}
.section-title {
padding: 1rem 0.5rem;
}
.title_name {
font-size: 3rem;
text-transform: capitalize;
}
.title_underline {
background: #F4D06F;
width: 15rem;
height: 0.25rem;
}
.title_text {
letter-spacing: .1rem;
line-height: 1.5;
margin-top: 1rem;
color: grey;
}
<article class="about-container">
<div class="title">
<h1 class="title_name">our story</h1>
<div class="title_underline"></div>
<p class="title_text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe illo quae ea nulla quas quia eaque omnis maxime tenetur molestiae eveniet at laboriosam provident, quibusdam quo sit expedita similique earum.</p>
</div>
<div class="about_image">
<img src="img/bravo.jpg" class="about_img" alt="about-img">
</div>
</article>
<!--about column 1-->
Actually you don't need a useless extra empty <div>, just a :after pseudo:
.title_name {
font-size: 3rem;
text-transform: capitalize;
}
.title_name:after {
content: "";
display: block;
margin-top: 1rem;
background: #F4D06F;
width: 15rem;
height: 0.25rem;
}
<h1 class="title_name">our story</h1>
<p>Lorem Ipsum</p>
Because it is a div it defaults to display: block;, so you'll need to set it to display: inline-block;.
.title_underline
{
background: #F4D06F;
width: 15rem;
height: 0.25rem;
display: inline-block;
}