# My second column is not floating to the right

**URL:** <https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [January 17, 2021, 1:08am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039 "2021-01-17T01:08:45Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chukwuka](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chukwuka/32/198036_2.png) [@Chukwuka](https://forum.freecodecamp.org/u/Chukwuka)\
**Post date:** [January 17, 2021, 1:08am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/1 "2021-01-17T01:08:45Z")

</div>

Please I need someone to help me check why my second column is not floating to the right.

Below is the codepen link  
[https://codepen.io/Shukar77/project/editor/ANwqob](https://codepen.io/Shukar77/project/editor/ANwqob)

---

<div class="post-metadata">

**Author:** ![cherylm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cherylm/32/201967_2.png) [@cherylm](https://forum.freecodecamp.org/u/cherylm)\
**Post date:** [January 17, 2021, 1:21am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/2 "2021-01-17T01:21:07Z")

</div>

Hi there,

Maybe you need to this to be a CodePen project for some reason. But IMO, your question would be easier to answer if it were a Pen instead of a Project. In CodePen, you can have unlimited Pens, but only one Project. A Pen would allow people to locally change the HTML and CSS to test solutions, but the files in the Project is read-only.

[Pen vs. Project.](https://blog.codepen.io/2017/05/05/whats-difference-pens-projects/)

---

<div class="post-metadata">

**Author:** ![Chukwuka](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chukwuka/32/198036_2.png) [@Chukwuka](https://forum.freecodecamp.org/u/Chukwuka)\
**Post date:** [January 17, 2021, 1:33am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/3 "2021-01-17T01:33:30Z")

</div>

Ohk  
Will do right away

---

<div class="post-metadata">

**Author:** ![Chukwuka](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chukwuka/32/198036_2.png) [@Chukwuka](https://forum.freecodecamp.org/u/Chukwuka)\
**Post date:** [January 17, 2021, 1:45am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/4 "2021-01-17T01:45:37Z")

</div>

Here is the new codepen url

[https://codepen.io/Shukar77/pen/yLaGZWP](https://codepen.io/Shukar77/pen/yLaGZWP)

---

<div class="post-metadata">

**Author:** ![cherylm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cherylm/32/201967_2.png) [@cherylm](https://forum.freecodecamp.org/u/cherylm)\
**Post date:** [January 17, 2021, 2:07am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/5 "2021-01-17T02:07:54Z")

</div>

Hi again,

You don’t need to put all the stylesheet links in the html because the CSS is in the CSS section. Codepen does all the work linking them.

If you put borders around all your divs like so:

```auto
* {
  border: solid;
}

```

You will see that your ul in services is keeping your column from floating to the right. Change the CSS here to fix that:

```auto
.services ul{
    float: right;
    list-style: none;
    position: relative;
    top: -70px;
}

```

I would suggest using flexbox instead of positioning and floating. Once you get the hang of it, it’s much more flexible.

---

<div class="post-metadata">

**Author:** ![Chukwuka](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chukwuka/32/198036_2.png) [@Chukwuka](https://forum.freecodecamp.org/u/Chukwuka)\
**Post date:** [January 17, 2021, 2:16am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/6 "2021-01-17T02:16:10Z")

</div>

Thanks once again, It’s actually my first time using codepen

I will try out all your suggestion

---

<div class="post-metadata">

**Author:** ![Chukwuka](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chukwuka/32/198036_2.png) [@Chukwuka](https://forum.freecodecamp.org/u/Chukwuka)\
**Post date:** [January 17, 2021, 2:26am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/7 "2021-01-17T02:26:02Z")

</div>

Thanks for your contribution, but when I use flex-box the ul doesnt seem to align with the h2.

It keeps going below the h2

Any suggestion on what to do?

---

<div class="post-metadata">

**Author:** ![cherylm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cherylm/32/201967_2.png) [@cherylm](https://forum.freecodecamp.org/u/cherylm)\
**Post date:** [January 17, 2021, 2:46am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/8 "2021-01-17T02:46:26Z")

</div>

What happens if you put the `h2` and `ul` in it’s own div, and make that div `display: flex`.

---

<div class="post-metadata">

**Author:** ![Chukwuka](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chukwuka/32/198036_2.png) [@Chukwuka](https://forum.freecodecamp.org/u/Chukwuka)\
**Post date:** [January 17, 2021, 5:58pm UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/9 "2021-01-17T17:58:24Z")

</div>

Hello FCC,

I have tried everything I know including all of @cherylm suggestion but I seem not to be getting it and other suggestions would be entertained

@cherylm could you please help me recheck the code and try it out yourselves, maybe am not really getting what you are saying

---

<div class="post-metadata">

**Author:** ![cherylm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cherylm/32/201967_2.png) [@cherylm](https://forum.freecodecamp.org/u/cherylm)\
**Post date:** [January 17, 2021, 6:22pm UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/10 "2021-01-17T18:22:37Z")

</div>

Hi Chukwuka,

I have to run, but did you remove the styesheets from the CSS? I don’t know, but CodePen might be trying to display the stylesheets and the CSS in box.

I’ll return at some point today.

---

<div class="post-metadata">

**Author:** ![cherylm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cherylm/32/201967_2.png) [@cherylm](https://forum.freecodecamp.org/u/cherylm)\
**Post date:** [January 18, 2021, 3:26am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/11 "2021-01-18T03:26:30Z")

</div>

OK. Not sure why I’m the only one replying. I think I figured it out though.

1. In the HTML, remove all the style sheet links. If I keep them in, it doesn’t work.

2. Add this to your CSS:

```auto
.row {
  display: flex;
  justify-content: space-between;
}

```

I think that’s what you want your columns to do. I should also point out, this is only one way to do this. We could have used grid, which I haven’t used since completing the Responsive Web Design projects. Or we could have used positioning and floating by floating the column 1 left and column 2 right. But from what I’ve read, people are using flex and grid and steering away from floats.

Anyway, I hope this has been helpful.

---

<div class="post-metadata">

**Author:** ![Chukwuka](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chukwuka/32/198036_2.png) [@Chukwuka](https://forum.freecodecamp.org/u/Chukwuka)\
**Post date:** [January 18, 2021, 10:54pm UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/12 "2021-01-18T22:54:46Z")

</div>

Thank you very much @cherylm for taking your time to respond to my questions.

Grid gave me exactly what I wanted

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [July 20, 2021, 10:54am UTC](https://forum.freecodecamp.org/t/my-second-column-is-not-floating-to-the-right/441039/13 "2021-07-20T10:54:57Z")

</div>

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