How do I move my bullet list to the center while having them vertically aligned in CSS?-CodePudding

I'm not sure what I did wrong but the bullet points on the unordered lists are shifted to the far left of the page while the contents remain in the center. What's the best way to move the bullet points back to the center while having them vertically aligned so they don't look unorganized?

Here's a link to my codepen project:

https://codepen.io/danielanggggg/pen/LYjwOer

HTML

#welcome-section {
  width: 100%;
  height: 100vh;
  top: 10vw;
  left: 2vw;
  display: block;
  margin-top: 10rem;
  text-align: center;
}

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  background-color: grey;
}

<section id="welcome-section">
  <h1>Daniel Ang</h1>
  <h3>Freelance Copywriter</h3>
  <p>Hi there! I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services.</p>
  <p>I specialize in writing:</p>
  <ul>
<li>Emails</li>
<li>Landing Pages</li>
<li>Sales Letters</li>
<li>Product Descriptions</li>
<li>Facebook/Instagram Ads</li>
  </ul>
  <p>If you need any of the services above, please don't hesitate to reach out!</p>
</section>

CodePudding user response：

I add below code and fixed!

ul{
   width: 20%;
   margin: 0 auto;
}

You can change width as much as you want or use width: max-content;.

#welcome-section {
  width: 100%;
  height: 100vh;
  top: 10vw;
  left: 2vw;
  display: block;
  margin-top: 10rem;
  text-align: center;
}

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  background-color: grey;
}

ul {
  width: 20%;
  margin: 0 auto;
}

<section id="welcome-section">
  <h1>Daniel Ang</h1>
  <h3>Freelance Copywriter</h3>
  <p>Hi there! I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services.</p>
  <p>I specialize in writing:</p>
  <ul>
    <li>Emails</li>
    <li>Landing Pages</li>
    <li>Sales Letters</li>
    <li>Product Descriptions</li>
    <li>Facebook/Instagram Ads</li>
  </ul>
  <p>If you need any of the services above, please don't hesitate to reach out!</p>
</section>

CodePudding user response：

Another aproach is to try to use Flex - Bootstrap in order to achieve this. If you have not installed it yet, feel free to do it, because it is going to help you a lot. I would include the list inside div classes, as shown below:

 <div class="d-flex flex-sm-row" >

   <div class="d-flex justify-content-center d-flex align-items-end flex-fill">
      <ul>
        <li>
        ...
        </li>
      </ul>
   </div>
  </div>

CodePudding user response：

You could use a flex box with column direction to get what you want without specifying a width for your bullet list.

#welcome-section {
  width: 100%;
  /* height is changed to min-height so the actual height will still be calculated based on content when 100vh is smaller than the height of your content */
  min-height: 100vh;
  top: 10vw;
  left: 2vw;
  margin-top: 10rem;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

https://codepen.io/fredns/pen/QWqNLOb

CodePudding user response：

wrap ul in div and use css as below:

#welcome-section {
  width: 100%;
  height: 100vh;
  top: 10vw;
  left: 2vw;
  display: block;
  margin-top: 10rem;
  text-align: center;
}

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  background-color: grey;
}
.wrap{
display:flex
}
ul{
margin:auto;
}

<section id="welcome-section">
  <h1>Daniel Ang</h1>
  <h3>Freelance Copywriter</h3>
  <p>Hi there! I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services.</p>
  <p>I specialize in writing:</p>
<div class="wrap">
  <ul>
<li>Emails</li>
<li>Landing Pages</li>
<li>Sales Letters</li>
<li>Product Descriptions</li>
<li>Facebook/Instagram Ads</li>
  </ul>
</div>
  <p>If you need any of the services above, please don't hesitate to reach out!</p>
</section>

CodePudding user response：

You can add following CSS for ul and li and this will solve your issue.

ul li {
    text-align: left;
}

ul {
    width: fit-content;        
    margin: auto;
}

So your complete code will be;

 #welcome-section {
            width: 100%;
            height: 100vh;
            top: 10vw;
            left: 2vw;
            display: block;
            margin-top: 10rem;
            text-align: center;
        }

        #navbar {
            position: fixed;
            top: 0px;
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 20px;
            background-color: grey;
        }

        ul li {
            text-align: left;
        }

        ul {
            width: fit-content;
            margin: auto;
        }

<section id="welcome-section">
        <h1>Daniel Ang</h1>
        <h3>Freelance Copywriter</h3>
        <p>Hi there! I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services.</p>
        <p>I specialize in writing:</p>
        <ul>
            <li>Emails</li>
            <li>Landing Pages</li>
            <li>Sales Letters</li>
            <li>Product Descriptions</li>
            <li>Facebook/Instagram Ads</li>
        </ul>
        <p>If you need any of the services above, please don't hesitate to reach out!</p>
    </section>