How can i make my web layout less wide while keeping it responsive at the same time?-CodePudding

I am making a web layout for my website and i ran into an issue. The overall width of the layout is too much, i'd like to have some margins on the sides of the screen. The layout is responsive but when i add margins to the sides and the responsivity is no longer there and the page looks horrible on a small screen.

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel = "stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>

    <div >
        <header >
            <h1>Bootstrap</h1>
        </header>

            <article >
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corporis quibusdam officia magnam asperiores exercitationem laboriosam dolorum hic minima pariatur?
                </p>

            </article>

        <footer >
            <h1>Footer</h1>
        </footer>
    </div>

    

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src = "web.js"></script>
</body>
</html>

css:

body{
    background-color: gray;
}
.wrapper{
    display:flex;
    flex-flow: row wrap;
    text-align: center;
    color: black;
}

.wrapper > * {
    padding: 10px;
    flex: 1 100%;
    border-radius: 5px;
    margin: 10px;
}
.header{
    background: white;
    height: 250px;
}

.footer{
    background: white;
    height: 80px;
}
.main{
    text-align: left;
    background: white;
    height: 300px;
    font-size: 24px;
    height: 1200px;
}

I tried adding margins to the sides but it didn't work.

.wrapper > * {
    padding: 10px;
    flex: 1 100%;
    border-radius: 5px;
    margin: 10px 300px 10px 300px;
}

CodePudding user response：

You may want to use @media in CSS

@media only screen and (max-width: 600px) {
    .wrapper > * {
        margin: 0px;
    }       
}

CodePudding user response：

Easiest way would be to give the .wrapper a max-width and set the margins to center it

.wrapper{
    max-width: 80vw;  // layout will be this same width on every screen
    margin: 0 auto;  // wrapper will be centered
    display:flex;
    flex-flow: row wrap;
    text-align: center;
    color: black;

}