Struggling with my website layout design as I encountered an issue. The overall width of the layout is too excessive, and I want to introduce some margins on the sides for a better visual appeal. Although the responsive design works well originally, adding margins disrupts it, making the page look terrible on smaller screens.
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8a918c918f92ded3cfd7de8e">[email protected]</a>/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 class="wrapper">
<header class="header">
<h1>Bootstrap</h1>
</header>
<article class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corporis quibusdam officia magnam asperiores exercitationem laboriosam dolorum hic minima pariatur?
</p>
</article>
<footer class="footer">
<h1>Footer</h1>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e455b4559">[email protected]</a>/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;
}
Attempts were made to adjust margins but did not yield satisfactory results.
.wrapper > * {
padding: 10px;
flex: 1 100%;
border-radius: 5px;
margin: 10px 300px 10px 300px;
}