Why does this paragraph link look so trendy?

Question

I've attached some code here, I recently added a link to my portfolio website and the paragraph link is doing something weird, it seems to be aligning funky, I'm not sure what the problem is. I'm wondering if it might stem from some other styles in CSS (e.g. nav_links), but I'm not sure how to correct this without messing up other styles.

I added a class to a href and tried adding some CSS styles to it, it solved some issues (like size and color) but there were gaps

Answer 1

Rereading your question, I'm not sure exactly what problem you are trying to solve. What does "aligned fashion" mean?

The CSS on Design Portfolio has float: left and margins.

float: left Takes it out of the flow and moves it to the left of the viewport, and causes other text (such as "Read a book") to wrap around it (and its margins) ).

.nav_link li, a {
    display: inline;
    float: left; /* <------ this */
    font-size: 24px;
    font-family: "neue-haas-grotesk-display", sans-serif;
    margin-left: 16px; /* <------ and this */
    margin-top: 24px; /* <------ and this */
    margin-bottom: 36px; /* <------ and this */
    text-decoration: none;
    color: #f8f8f8;
}

Answer 2

You made a mistake in CSS and did something like this:

.nav_link li, a

You need to remove these commas. I assume you are trying to style .nav_link in a li inside an element with class a. But that's not what you're doing. Instead, this selector applies a bunch of styles to .nav_link li and individually to all a elements. The selector should actually look like this:

.nav_link li a

You are experiencing this issue in multiple places in your CSS.