-1

I've created an webpage to learn Frontend webdevelopment. All content should be centered but one of my containers just doesnt center at all. It might just be a spelling mistake, but I've searched quite long and couldnt find anything wrong with the code myself. Thats why I'm asking for help on here now.

body {
    margin: 0;
    font-family: sans-serif;
}

p, blockquote {
    font-size: 0.9em;
    line-height: 1.6em;

    
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.container {
    text-align: center;
    padding: 0.8em;
}

.logo {
    width: 130px;
}

.hide-mobile {
    display: none;
}

header {
    display: flex;
    justify-content: space-between;
}

.menu {
    width: 25px;
    margin-top: 45%;
}

.server {
    width: 70%;
    margin: 2em auto 2em 25%;
}

h1, .subhead {
    position: relative;
    z-index: 3;
}

.subhead {
    font-size: 1.1em;
}

.blue-container {
    width: 100%;
    background: #00C2FF;
    color: white;
    margin-top: 15%;
    padding: 4em 0 2em;
    border-top-left-radius: 40px;
    transform: skewY(-2deg);
}

.blue-container:before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #00C2FF;
    position: absolute;
    top: -39px;
    right: 0;
    z-index: -2;

}

.blue-container:after {
    content: "";
    width: 80px;
    height: 80px;
    background-color: white;
    position: absolute;
    top: -80px;
    right: 0;
    border-radius: 50%;
    z-index: -1;
}

.blue-container ul {
    transform: skewY(2deg);
}

.blue-container ul li {
    margin-bottom: 3em;
}

.blue-container ul li p {
    padding: 0 0.5em;
}

.blue-container img {
    width: 14%;
}

.blue-container ul li:nth-child(3) img{
    width: 10%;
}

.grey-container {
    background: #F6F6F6;
    padding: 4em 0 2em;
    margin-top: -3%;
}

.grey-container ul li:first-child {
    margin-bottom: 2em;
}

figure {
    margin: 0;
    padding: 0;
}

figcaption {
    font-weight: bold;
    color: #00C2FF;
}

h2 {
    margin-top: 7%;
}

.cta {
    background: #00cc80;
    width: calc(100% - 1em);
    display: block;
    color: white;
    border-radius: 20px;
    padding: .5em;
    text-decoration: none;
    font-size: 1.5em;
    margin: 3% auto 7%;
    position: relative;
    z-index: 4;
}

.footer-container {
    width: 100%;
    background: #3D444A;
    color: #fff;
    padding: 3em 0;
    border-top-right-radius: 40px;
    transform: skewY(2deg);
}

.footer-container .container {
    transform: skewY(-2deg);
}

.footer-container:before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #3D444A;
    position: absolute;
    top: -39px;
    left: 0;
    z-index: -2;
}

.footer-container:after {
    content: "";
    width: 80px;
    height: 80px;
    background-color: #FFF;
    position: absolute;
    top: -80px;
    left: 0;
    z-index: -1;
    border-radius: 50%;
}

.footer-links {
    margin: 0 auto;
}

.footer-links li {
    display: inline-block;
}

.footer-links li a{
    color: #9d9d9d;
    font-size: .8em;
}

nav ul {
    position: fixed;
    width: 60%;
    top: 0;
    right: 0;
    text-align: left;
    background: rgb(36, 41, 44);
    height: 100%;
    z-index: 7;
    padding-top: 3em;
}

nav ul li a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 1em 2em
}

nav ul li a:hover {
    background-color: rgb(65, 72, 78)
}

.exit-btn {
    margin-bottom: 1em;
    margin-top: -1.3em;
    text-align: right;
    padding-right: 1.4em;
}

.exit-btn img {
    width: 15px;
    cursor: pointer;
}

@media only screen and (min-width: 650px) {

    .server {
        width: 50%;
    }

    h1 {
        font-size: 3em;
        margin: 0;
    }

    .subhead {
        font-size: 1.4em;
        margin-bottom: 12%;
    }

    .blue-container {
        margin: 0;
    }

    .blue-container img {
        width: 20%;
    }

    .blue-container ul li:nth-child(3) img{
        width: 11%;
        margin-top: -6px;
    }

    .blue-container ul {
        display: flex;
        margin-top: -1em;
        align-items: center;
    }

    .blue-container ul li {
        margin-bottom: 0;
    }

    .blue-container ul li p {
        padding: 0 .8em;
    }

    .grey-container ul {
        display: flex;
    }

    nav ul {
        width: 40%;
    }

    .cta {
        width: 80%;
    }
}

@media only screen and (min-width: 875px) {

    .subhead {
        margin-bottom: 15%;
    }

    .blue-container {
        padding-top: 1em;
    }

    .blue-container ul {
        margin: 0 0 4% 0;
    }

    .blue-container ul {
        margin: 4% 0 0 0;
    }

    .cta {
        width: 65%;
    }
}

@media only screen and (min-width: 1024px) {

    .blue-container {
        margin-top: 6em;
    }

    .cta {
        width: 50%;
    }

    .container {
        width: 80%;
        margin: 0 auto;
    }

    .show-desktop {
        display: block;
        margin: 0 auto;
    }

    .hide-desktop {
        display: none;
    }

    nav ul {
        position: inherit;
        width: auto;
        background: none;
        height: auto;
        display: flex;
        padding-top: 0;
    }

    nav ul li {
        float: left;
    }

    nav ul li a {
        color: black;
        text-align: right;
        padding: 1em 2em;
        background-color: inherit;
    }

    nav ul li a:hover {
        background-color: inherit;
    }

    .scroll {
        width: 30px;
        animation: move 1s infinite alternate;
        margin-top: -8em;
    }

    @keyframes move {
        0% {
            transform: translateY(35px);
        }
        100% {
            transform: translateY(50px);
        }
    }
}

@media only screen and (min-width: 1600px) {

    .server{
        width: 40%;
        margin: 5em auto 4em 15%;
    }

    .container{
        width: 70%
    }

    .blue-container {
        padding: 1em 0 2em;
    }

    .blue-container ul li p, blockquote {
        font-size: 1.3em;
    }

    .grey-container{
        padding: 6em 0 4em;
    }

    h2 {
        margin-top: 4em;
    }

    .blue-container img {
        width: 15%;
    }

    .blue-container ul li:nth-child(3) img {
        width: 8%;
        margin-top: -4px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Frontend</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <header>
            <img src="images/logo.svg" alt="Logo" class="Logo">

            <nav>
                <a href="#" class="hide-desktop">
                    <img src="images/ham.svg" alt="toggle menu" class="menu" id="menu">
                </a>

                <ul class="show-desktop hide-mobile" id="nav">
                    <li class="exit-btn hide-desktop" id="exit"><img src="images/exit.svg" alt="exit"></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section>
            <img src="images/server.svg" alt="server" class="server">

            <h1>Web Hosting for the modern Era</h1>
            <p class="subhead">Go Serverless and pay only for what you use.</p>

            <img src="images/scroll.svg" alt="scroll down" class="scroll hide-mobile show-desktop">
        </section>
    </div>

    <div class="blue-container">
        <div class="container">
            <ul>
                <li>
                    <img src="images/icon-1.svg" alt="img1">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
                <li>
                        <img src="images/icon-2.svg" alt="img1">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
                <li>
                        <img src="images/icon-3.svg" alt="img1">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="grey-container">
        <div class="container">
            <ul>
                <li>
                    <figure>
                        <img src="images/user1.png" alt="user1">
                        <blockquote>I've never seen anything alike this!</blockquote>
                        <figcaption>- Jane Doe</figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/user2.png" alt="user2">
                        <blockquote>Its just great! Such an amazing product.</blockquote>
                        <figcaption>- Max Harvard</figcaption>
                    </figure>
                </li>
            </ul>
        </div>
    </div>

    <div class="container">
        <h2>Start your free trial now!</h2>
        <a href="#" class="cta">Get Started</a>
    </div>

    <footer>
        <div class="footer-container">
            <div class="container">
                <a href="#">
                    <img src="images/logo-white.svg" alt="logowhite" class="logo">
                </a>
                <p class="address">Melrose Place, 90210<br>USA</p>
                <ul class="footer-links">
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Privacy Polacy</a></li>
                </ul>
            </div>
        </div>
    </footer>

    <script>

        var menu = document.getElementById('menu');
        var nav = document.getElementById('nav');
        var exit = document.getElementById('exit');

        menu.addEventListener('click', function(e){
            nav.classList.toggle('hide-mobile')
            e.preventDefault();
        })

        exit.addEventListener('click', function(e){
            nav.classList.toggle('hide-mobile')
            e.preventDefault();
        })

    </script>
</body>
</html>

Image of how its looking right now

As you can see its off-center and my goal is to get it to center too.

Thanks for helping in advance :)

Manuel Sarica
  • 35
  • 8
  • it would help to put this code in something like a https://codepen.io/pen so people can quickly edit and share like this https://codepen.io/akinhwan/pen/VOQXWJ – Akin Hwan May 23 '19 at 14:08
  • 1
    @AkinHwan — People can quickly edit by clicking "Copy snippet to answer". No need to involve third party sites. – Quentin May 23 '19 at 14:10
  • 1
    Could you edit the snippet in your question (click `edit` on your question and then `edit the above snippet` in the post preview) so it shows the issue you are having? The code provided doesn't appear to replicate your screenshot. Always try to include a [mcve] – James Coyle May 23 '19 at 14:11
  • 1
    The code in the question doesn't match the screenshot. The boxes are arranged horizontally in the screenshot but vertically in the code. – Quentin May 23 '19 at 14:11
  • Thank you, @JamesCoyle for doing his work for him. – Rob May 23 '19 at 14:12
  • Possible duplicate of https://stackoverflow.com/questions/6243070/css-text-align-center-not-working – kpr379 May 23 '19 at 14:14
  • I have now added the whole code into the snippet, sorry for the inconvenience. – Manuel Sarica May 23 '19 at 14:35

2 Answers2

0

Just make your li display-inline:

li {
  display: inline-block;
}

ul {
  list-style: none;
}

I also removed the bullet points by setting list-style to none.

Here is a working example: https://codepen.io/anon/pen/zQRWEJ

ihkawiss
  • 986
  • 3
  • 9
  • 25
  • I have updated my post wit the whole code now. I already had the list-style set to none and changing the display to inline-block didnt seem to change anything. – Manuel Sarica May 23 '19 at 14:38
0

Add a unique class to that list, I added user-list. Then you can apply flexbox layout to just that section:

.user-list {
  display: flex;
  justify-content: center;
}
.user-list li {
  flex: 0 0 auto; /* dont grow, dont shrink, width auto based on content */
}

The justify-content: center rule is what is making the items centered.

body {
    margin: 0;
    font-family: sans-serif;
}

p, blockquote {
    font-size: 0.9em;
    line-height: 1.6em;

    
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.container {
    text-align: center;
    padding: 0.8em;
}

.logo {
    width: 130px;
}

.hide-mobile {
    display: none;
}

header {
    display: flex;
    justify-content: space-between;
}

.menu {
    width: 25px;
    margin-top: 45%;
}

.server {
    width: 70%;
    margin: 2em auto 2em 25%;
}

h1, .subhead {
    position: relative;
    z-index: 3;
}

.subhead {
    font-size: 1.1em;
}

.blue-container {
    width: 100%;
    background: #00C2FF;
    color: white;
    margin-top: 15%;
    padding: 4em 0 2em;
    border-top-left-radius: 40px;
    transform: skewY(-2deg);
}

.blue-container:before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #00C2FF;
    position: absolute;
    top: -39px;
    right: 0;
    z-index: -2;

}

.blue-container:after {
    content: "";
    width: 80px;
    height: 80px;
    background-color: white;
    position: absolute;
    top: -80px;
    right: 0;
    border-radius: 50%;
    z-index: -1;
}

.blue-container ul {
    transform: skewY(2deg);
}

.blue-container ul li {
    margin-bottom: 3em;
}

.blue-container ul li p {
    padding: 0 0.5em;
}

.blue-container img {
    width: 14%;
}

.blue-container ul li:nth-child(3) img{
    width: 10%;
}

.grey-container {
    background: #F6F6F6;
    padding: 4em 0 2em;
    margin-top: -3%;
}

.grey-container ul li:first-child {
    margin-bottom: 2em;
}

figure {
    margin: 0;
    padding: 0;
}

figcaption {
    font-weight: bold;
    color: #00C2FF;
}

h2 {
    margin-top: 7%;
}

.cta {
    background: #00cc80;
    width: calc(100% - 1em);
    display: block;
    color: white;
    border-radius: 20px;
    padding: .5em;
    text-decoration: none;
    font-size: 1.5em;
    margin: 3% auto 7%;
    position: relative;
    z-index: 4;
}

.footer-container {
    width: 100%;
    background: #3D444A;
    color: #fff;
    padding: 3em 0;
    border-top-right-radius: 40px;
    transform: skewY(2deg);
}

.footer-container .container {
    transform: skewY(-2deg);
}

.footer-container:before {
    content: "";
    width: 40px;
    height: 40px;
    background-color: #3D444A;
    position: absolute;
    top: -39px;
    left: 0;
    z-index: -2;
}

.footer-container:after {
    content: "";
    width: 80px;
    height: 80px;
    background-color: #FFF;
    position: absolute;
    top: -80px;
    left: 0;
    z-index: -1;
    border-radius: 50%;
}

.footer-links {
    margin: 0 auto;
}

.footer-links li {
    display: inline-block;
}

.footer-links li a{
    color: #9d9d9d;
    font-size: .8em;
}

nav ul {
    position: fixed;
    width: 60%;
    top: 0;
    right: 0;
    text-align: left;
    background: rgb(36, 41, 44);
    height: 100%;
    z-index: 7;
    padding-top: 3em;
}

nav ul li a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 1em 2em
}

nav ul li a:hover {
    background-color: rgb(65, 72, 78)
}

.exit-btn {
    margin-bottom: 1em;
    margin-top: -1.3em;
    text-align: right;
    padding-right: 1.4em;
}

.exit-btn img {
    width: 15px;
    cursor: pointer;
}

.user-list {
  display: flex;
  justify-content: center;
}
.user-list li {
  flex: 0 0 auto; /* dont grow, dont shrink, width auto based on content */
}

@media only screen and (min-width: 650px) {

    .server {
        width: 50%;
    }

    h1 {
        font-size: 3em;
        margin: 0;
    }

    .subhead {
        font-size: 1.4em;
        margin-bottom: 12%;
    }

    .blue-container {
        margin: 0;
    }

    .blue-container img {
        width: 20%;
    }

    .blue-container ul li:nth-child(3) img{
        width: 11%;
        margin-top: -6px;
    }

    .blue-container ul {
        display: flex;
        margin-top: -1em;
        align-items: center;
    }

    .blue-container ul li {
        margin-bottom: 0;
    }

    .blue-container ul li p {
        padding: 0 .8em;
    }

    .grey-container ul {
        display: flex;
    }

    nav ul {
        width: 40%;
    }

    .cta {
        width: 80%;
    }
}

@media only screen and (min-width: 875px) {

    .subhead {
        margin-bottom: 15%;
    }

    .blue-container {
        padding-top: 1em;
    }

    .blue-container ul {
        margin: 0 0 4% 0;
    }

    .blue-container ul {
        margin: 4% 0 0 0;
    }

    .cta {
        width: 65%;
    }
}

@media only screen and (min-width: 1024px) {

    .blue-container {
        margin-top: 6em;
    }

    .cta {
        width: 50%;
    }

    .container {
        width: 80%;
        margin: 0 auto;
    }

    .show-desktop {
        display: block;
        margin: 0 auto;
    }

    .hide-desktop {
        display: none;
    }

    nav ul {
        position: inherit;
        width: auto;
        background: none;
        height: auto;
        display: flex;
        padding-top: 0;
    }

    nav ul li {
        float: left;
    }

    nav ul li a {
        color: black;
        text-align: right;
        padding: 1em 2em;
        background-color: inherit;
    }

    nav ul li a:hover {
        background-color: inherit;
    }

    .scroll {
        width: 30px;
        animation: move 1s infinite alternate;
        margin-top: -8em;
    }

    @keyframes move {
        0% {
            transform: translateY(35px);
        }
        100% {
            transform: translateY(50px);
        }
    }
}

@media only screen and (min-width: 1600px) {

    .server{
        width: 40%;
        margin: 5em auto 4em 15%;
    }

    .container{
        width: 70%
    }

    .blue-container {
        padding: 1em 0 2em;
    }

    .blue-container ul li p, blockquote {
        font-size: 1.3em;
    }

    .grey-container{
        padding: 6em 0 4em;
    }

    h2 {
        margin-top: 4em;
    }

    .blue-container img {
        width: 15%;
    }

    .blue-container ul li:nth-child(3) img {
        width: 8%;
        margin-top: -4px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Frontend</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <header>
            <img src="images/logo.svg" alt="Logo" class="Logo">

            <nav>
                <a href="#" class="hide-desktop">
                    <img src="images/ham.svg" alt="toggle menu" class="menu" id="menu">
                </a>

                <ul class="show-desktop hide-mobile" id="nav">
                    <li class="exit-btn hide-desktop" id="exit"><img src="images/exit.svg" alt="exit"></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section>
            <img src="images/server.svg" alt="server" class="server">

            <h1>Web Hosting for the modern Era</h1>
            <p class="subhead">Go Serverless and pay only for what you use.</p>

            <img src="images/scroll.svg" alt="scroll down" class="scroll hide-mobile show-desktop">
        </section>
    </div>

    <div class="blue-container">
        <div class="container">
            <ul>
                <li>
                    <img src="images/icon-1.svg" alt="img1">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
                <li>
                        <img src="images/icon-2.svg" alt="img1">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
                <li>
                        <img src="images/icon-3.svg" alt="img1">
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="grey-container">
        <div class="container">
            <ul class="user-list">
                <li>
                    <figure>
                        <img src="images/user1.png" alt="user1">
                        <blockquote>I've never seen anything alike this!</blockquote>
                        <figcaption>- Jane Doe</figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/user2.png" alt="user2">
                        <blockquote>Its just great! Such an amazing product.</blockquote>
                        <figcaption>- Max Harvard</figcaption>
                    </figure>
                </li>
            </ul>
        </div>
    </div>

    <div class="container">
        <h2>Start your free trial now!</h2>
        <a href="#" class="cta">Get Started</a>
    </div>

    <footer>
        <div class="footer-container">
            <div class="container">
                <a href="#">
                    <img src="images/logo-white.svg" alt="logowhite" class="logo">
                </a>
                <p class="address">Melrose Place, 90210<br>USA</p>
                <ul class="footer-links">
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Privacy Polacy</a></li>
                </ul>
            </div>
        </div>
    </footer>

    <script>

        var menu = document.getElementById('menu');
        var nav = document.getElementById('nav');
        var exit = document.getElementById('exit');

        menu.addEventListener('click', function(e){
            nav.classList.toggle('hide-mobile')
            e.preventDefault();
        })

        exit.addEventListener('click', function(e){
            nav.classList.toggle('hide-mobile')
            e.preventDefault();
        })

    </script>
</body>
</html>
BugsArePeopleToo
  • 2,976
  • 1
  • 15
  • 16
  • That worked, thanks. But could you explain to me what i need the "flex: 0 0 auto;" part for? – Manuel Sarica May 23 '19 at 19:06
  • @ManuelSarica Flexbox has the potential to drastically change the dimensions of items inside. That rule is just making sure these flex items will retain their normal size. – BugsArePeopleToo May 24 '19 at 14:32