T.XL T.XL - 4 months ago 9
CSS Question

How can I get the words in my paragraph div to align to the left in a vertical line?

I can not get the words in my paragraph to vertically align to the left. I need them to be in a straight line to the left rather than the current zig zag approach I currently have. Thank you for any advice you may have.



/* tablet sized screen*/

@media (min-width: 769px) {
#columns {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
flex-wrap: no-wrap;
}
.main-header h1 {
justify-content: center;
}
.nav {
flex-direction: row;
max-width: 350px;
}
.nav li {
border: none;
background-color: #eff5f5;
justify-content: center;
}
body {
margin: 2em;
padding: 0;
}
#header-info {
position: relative;
}
.profile-image {
position: absolute;
right: 5em;
height: 200px;
width: 200px;
}
#first-paragraph {
position: absolute;
width: 400px;
height: 300px;
left: 10%;
}
#first-pargaraph p {
text-align: left;
}
#header_info {
max-height: 400px;
background-color: #eff5f5;
margin-top: 0;
}

<div id="header_info">
<header class="main-header">
<h1>Tracy Excell</h1>
<ul class="nav">
<li><a id="home">Home</a>
</li>
<li><a href="#portfolio">Portfolio</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</header>

<div id="wrapper">

<img src="images/kiwiicon2.jpg" alt="Profile-picture" class="profile-image">

<div id="first-paragraph">
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>




Answer

Have you tried in your css

text-align: left;

This usually aligns text to the left. I haven't had time to try your code though, so I am hoping this helps.

Normally you don't need to wrap paragraph tags with divs, unless you are going to load dynamic content into that div. If you need to do something to the paragraph in css you can just apply an id or a class to the paragraph tag.

So your css would be

.paragraph
{
     text-align: left;
}