enter image description here我正在使用物化框架来构建我的第一个基本站点，但是在仅移动设备视图中，边距非常宽，我希望它们能够全屏显示，以使阅读效果更好，减少中间卡的伸展。
我现在还附上了一张图片，因为您可以看到填充和边距非常宽。
https://codepen.io/jehc10/pen/LKqRRQ
.brand-logo {
margin-left: 20px;
}
.card {
margin-top: 15px;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
font-family: 'ABeeZee', sans-serif;
background: #fad1df;
}
main {
flex: 1 0 auto;
}
.custom {
margin-right: 100px;
margin-left: 100px;
}
.pagination {
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
}
table {
width: 600px;
margin: auto;
border: 2px solid #f1749e;
}<!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>My materialize website</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="materialize.css">
<link href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<main>
<nav>
<div class="nav-wrapper pink lighten-3">
<a href="#" class="brand-logo">Website</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
<!-- Cards -->
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 1</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">Request a quote</a>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Example 2</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">Request a quote</a>
</div>
</div>
</div>
</div>
<!-- Middle card -->
<div class="mobile-margin visible-xs">
<div class="lg12">
<div class="card custom light-blue lighten-5">
<div class="card-content black-text">
<span class="card-title">Example 1</span>
<p>
Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id
risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt
sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget,
consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum
semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium.
In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper
suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue.
Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis
ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque
vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna.
</p>
</div>
</div>
</div>
<!-- Table -->
<table class="responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
<!-- Hover button -->
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<!-- Pagination -->
<ul class="pagination">
<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
<li class="active"><a href="#!">1</a></li>
<li class="waves-effect"><a href="#!">2</a></li>
<li class="waves-effect"><a href="#!">3</a></li>
<li class="waves-effect"><a href="#!">4</a></li>
<li class="waves-effect"><a href="#!">5</a></li>
<li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>
</main>
<!-- Footer -->
<footer class="page-footer pink lighten-3">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2019 Jesse
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>