I tried adjusting the margin and padding to 0 but it would not push the line "Preamble" and the rest of the unordered list to the left

HTML-CSS
1

I tried adjusting the margin and padding to 0 but it would not push the line “Preamble” and the rest of the unordered list to the left. How do I move the text to the left?

Here is the relevant code.

index.html

<div class="card">
    <div class="navbar"> 
        <ul>
            <div class="unorderd-list"> 
            <li> <a href="#">Preamble </a> </li>
            <li> <a href="#">Article I </a> </li>
            <li> <a href="#">Article II </a> </li>
            <li> <a href="#"> Article III </a> </li>        
            <li> <a href="#">Article IV </a> </li>
            <li> <a href="#">Article V </a> </li>
            <li> <a href="#">Article VI </a> </li>  
       </ul> 
    </div>     
</div>

styles.css

.card {
background: red;
width: 300px;
text-align: justify;
margin: 0;
padding: 0;
}
/* I need the .unorderd-list because the li doesn’t inherint from the parent div */
.unorderd-list {
list-style-type: none;
text-align: left;
margin: 0;
padding: 0;
}

The output is below

image

2

Welcome to the community @ref !

It is very difficult for the community to offer accurate guidance without seeing the complete code, as it could be affected by other parts of the code.

For now, based on what I am seeing:

I notice

The div is inside the ul at the start, and outside it at the bottom

I suggest moving the top div to before the ul.

You may try using a css selector for the class ‘unorderd’-list (did you mean ‘unordered’-list’) with the property as text-align value left.

But as I say, it would be best if you could post the complete html and css code for more direct, accurate and quick guidance. As well, please tell us what step, or project, this is for to allow for testing to find the guidance to the resolution?

Keep up the good progress! :sun_with_face:

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.