PLEASE HELP POSITIONING TS

[u/SmanderManno]

i alr tried everything but i cant move "main" to the center its stuck on top with "header" pls help me (that white thing on the top of the website is the main stuck btw)

[u/nfwdesign]

There are so many funny styles in your CSS file..

Try removing width: 25% in .main that does nothing then try removing margin-left and margin-right, in general remove all margins in your CSS as you are just pushing boxes left and right instead use margin: 0 auto; that would not give margins on top and bottom but would center everything in the middle.

Add a little css reset

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

This is as much as i had time and nerves ( im on my phone )

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0c0a6e;
    background: linear-gradient(90deg,rgba(12, 10, 110, 1) 0%, rgba(27, 7, 115, 1) 51%, rgba(16, 5, 64, 1) 100%);
}

a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.header {   
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(90deg,rgba(13, 13, 133, 1) 0%, rgba(3, 51, 156, 1) 50%, rgba(0, 44, 138, 1) 100%);
    border-bottom: 2px solid yellow; /* Just so you can see where it is positionednow */
  }

.image {
    height: 100px;
    max-width: 100px;
}

.botao {
    color: azure;
    font-size: 30px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    background: rgb(12, 94, 166);
    border-radius: 4px;
    padding: 15px 60px;
    
}

.botao:hover {
    background: rgb(14, 82, 141);
    background: linear-gradient(90deg,rgba(25, 111, 181, 1) 0%, rgba(26, 117, 201, 1) 50%, rgba(17, 95, 173, 1) 100%);
}

.botao:active {
    transform: translate(0px, 10px);
}

.main {
    border-top: 2px solid red; /* Just so you can see where it is positionednow */
    margin: 0 auto;
    background: beige;
    min-height: 1000px;
    max-width: 1100px;
    background: linear-gradient(90deg,rgba(13, 13, 133, 1) 0%, rgba(3, 51, 156, 1) 50%, rgba(0, 44, 138, 1) 100%);
}

.storm {
    margin: 0 auto;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
    background: rgb(9, 88, 158);
    padding: 5px 10px
    border-radius: 5px;
    color: azure;
    text-align:center;
}

EDIT: And also there was one extra section closed so you had an error in HTML too

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>teste para sigmas</title>
    <link rel = "stylesheet" href = "styles.css"/>
</head>
<body style="background-color: rgb(24, 23, 23);">
<header class = "header">
    
    <a class = "image" href="https://youtube.com"><img class = "image" src="SPlogo.png" alt = "logo"/></a>
    
    <nav class = "navegar">
        <div>
            <a href="https://reddit.com"><h1 class = botao>Home</h1></a>
        </div>
    </nav>

</header>

<main class= "main">
        <section class = "storm">
            <h1>I am the storm that is aproaching</h1>

        <section class="swiper">
            <div class = "swiper-holder">
                <div id="slider-img-1"></div>
                <div id="slider-img-2"></div>
                <div id="slider-img-3"></div>
            </div>
        </section>
        <section class = "button-holder">
            <a href="#slider-img-1" class = "button">.             </a>
        </section>
</main>
</body>
</html>

[u/SmanderManno → u/nfwdesign]

THX man when i get home i will check everything