My current project involves creating a webpage on Google Sites for school. However, the site's appearance is not what I intended. Instead of displaying as I designed it, the page has extra elements that were added automatically by Google Sites. Is there a way to remove these unnecessary components?
.titlebox {
display: block;
margin: 10px;
padding: 50px;
background-color: yellow;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
.map {
margin: 10px;
display: inline;
float: left;
padding: 20px;
background-color: green;
border-radius: 10px;
border: 2px solid black;
}
.content {
margin: 10px;
display: inline;
float: right;
padding: 20px;
background-color: orange;
border-radius: 10px;
border: 2px solid black;
}
a div {
color: black;
text-decoration: none;
padding: 5px;
border-radius: 10px;
border: 2px;
}
a:hover div {
color: orange;
text-decoration: none;
padding: 5px;
border-radius: 10px;
border: 2px;
background-color: blue;
}<div class="titlebox">
<h1>GMO DEBATE</h1>
</div>
<div class="map">
<div text-align="center">
<h3>pages:</h3>
</div>
<ul>
<li>
<a href="pro">
<div>why GMOs should be labeled</div>
</a>
</li>
<li>
<a href="con">
<div>why GMOs shouldn't be labeled</div>
</a>
</li>
<li>
<a href="info">
<div>background information</div>
</a>
</li>
</ul>
</div>
<div class="content">
<h3>Should GMOs be labeled?</h3>
</div>Although the code is enclosed in a box, I believe the issue lies with the additional content that appeared before any modifications were made. Setting specific widths for the elements does not resolve the problem.