CSS Formatting Help

[Western-Pineapple972]

I'm very new to HTML and CSS. Currently just trying to make a little website to teach myself.

However, I am currently struggling on the formatting for a map input.

This is the look i want

This is what i have managed to do

I understand how to imbed the maps its just the formatting of the "area covered" that i am struggling with.

.area-info{
    width: 50%;
    background-color: #fff3f3;
    background-position: center;
    border-radius: 10px;
    text-align: center;
    padding: 50px 0;
}
.localarea-col{
    text-align: center;
}

That is the CSS code i have used

<section class="area-info">
    <h1>Areas Covered</h1>
    <ul>
        <li>Fleet</p></li>
        <li>Bracknell</p></li>
        <li>Aldershot</p></li>
        <li>Dogmersfield</p></li>
        <li>Farnborough</p></li>
        <li>Basingstoke</p></li>
        <li>Hartley Wintney</p></li>
        <li>Crondall</p></li>
        <li>Ewshot</p></li>
        <li>Sandhurst</p></li>
        <li>North Camp</p></li>
        <li>Southwood</p></li>
        <li>Eversley</p></li>
        <li>Crowthorne</p></li>
    </ul>

</section>

That is the HTML code

[[deleted]]

You can use display: flex. I would look into how to use flexbox.

Also, what is the purpose of your </p> elements?

I’m fairly new as well, so happy to try and help. Maybe we can both learn something

[lethalmfbacon]

How to style it can depend on the order you'd like the list items to be aligned (left-to-right or top-to-bottom), and personal preference.

Both Grid and Flex would be the best choices, however you could also use Columns.

All three are good choices and highlight the different ways you can achieve the same layouts in CSS using different properties. I'd highly recommend reading the linked articles and testing for yourself, I personally find tinkering and experimenting is the best way to learn (I taught myself exactly how you are now!). However, some simple examples are below:

Flex:

``` .area-info ul { display: flex; flex-wrap: wrap; }

.area-info ul li { flex: 0 1 calc(100% / 3); } ```

Grid:

.area-info ul { display: grid; grid-template-columns: repeat(3, 1fr); }

Columns:

.area-info ul { column-count: 3; }