Cannot get Div to fill full width on Wordpress - html

Question

I am trying to make a div that covers the whole width of the screen so that section of the screen is coloured.
This is on wordpress and I am not sure how to fill the whole area.
(Visit Us/Deal/Book Now part is not working the way I want it to)
edit
The CSS code is updated but it only goes to half of the page width
body {
margin: 0;
}
section {
float:left;
overflow:auto;
width:100%;
}
.visit {
position:absolute;
left:0;
display: flex;
margin-left:-55px;
}
table {
width:100%;
padding-left: 0px;
}
tr {
padding:0px;
margin:0px;
border-width:0px;
background-color:#15b6b8;
}
td {
width:33%;
height:30%;
}
td h4 {
text-align:center;
}
input {
text-align:center;
width:80%;
}
<code>
<section class="1">
<div class="description">
<h3>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="visit">
<table width="100%">
<tbody>
<tr>
<td>
<h4>Visit Us</h4>
<!--map--></td>
<td>
<h4>Today's Deal</h4>
<!-- Deal Picture --></td>
<td>
<h4>Book Now</h4>
<form data-myki-checked-cc="3"><input name="qname" type="text"
placeholder="Name" />
<input name="qemail" type="text" placeholder="Email" />
<input name="qphone" type="text" placeholder="Phone Number" />
</form></td>
</tr>
</tbody>
</table>
</div>
</section>
</code>
This code result

Answer 1

In this case your code is inside the container which is the bootstrap class. In order to achieve what you are looking for is you can have a wrapper outside the container and set the background-color.
.wrapper {
background-color: green;
height:50px;
}
.container>div{
background-color:yellow;
height:50px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<!-- Your content -->
<div>This is a sample Content</div>
</div>
</div>

Answer 2

You could position it absolute at the left border like that:
section {
width: 100%;
padding: 0px;
margin: 0px;
border-width: 0px;
}
table {
width: 100%;
position: absolute;
left: 0;
}
tr {
padding: 0px;
margin: 0px;
border-width: 0px;
background-color: #15b6b8;
}
td {
width: 33%;
height: 30%;
}
td h4 {
text-align: center;
}
input {
text-align: center;
width: 80%;
}
<section class="1">
<div class="description">
<h3>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="visit">
<table width="100%">
<tbody>
<tr>
<td>
<h4>Visit Us</h4>
<!--map-->
</td>
<td>
<h4>Today's Deal</h4>
<!-- Deal Picture -->
</td>
<td>
<h4>Book Now</h4>
<form data-myki-checked-cc="3"><input name="qname" type="text" placeholder="Name" />
<input name="qemail" type="text" placeholder="Email" />
<input name="qphone" type="text" placeholder="Phone Number" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
</section>

Answer 3

section {
width: 100%;
padding: 0px;
margin: 0px;
border-width: 0px;
}
table {
float: left;
width: 100%;
padding-left: 0px;
}
tr {
padding: 0px;
margin: 0px;
border-width: 0px;
background-color: #15b6b8;
}
td {
width: 33%;
height: 30%;
}
td h4 {
text-align: center;
}
input {
text-align: center;
width: 80%;
}
.visit{
width: 100% auto;
}
.fix-column{
width: 1100px;
max-width: 1200px;
margin: 2em auto;
}
<code>
<section class="container">
<div class="description">
<h3>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="visit">
<div class="fix-column">
<table >
<tbody>
<tr>
<td>
<h4>Visit Us</h4>
<!--map-->
</td>
<td>
<h4>Today's Deal</h4>
<!-- Deal Picture -->
</td>
<td>
<h4>Book Now</h4>
<form data-myki-checked-cc="3">
<input name="qname" type="text" placeholder="Name" />
<input name="qemail" type="text" placeholder="Email" />
<input name="qphone" type="text" placeholder="Phone Number" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</code>
Here is link for demo full width text center demo

Answer 4

Without disturbing the document flow, you can use negative margin to reposition the element. What you need to find out is how much margin and/or padding is used for the parent(s). Below I use for the section: margin: 30px, padding: 10px.
As a result, the negative margin for the content is -40px.
The colors are used to improve visibility of the effect.
* {
box-sizing: border-box;
}
body {
background-color: green;
margin: 0;
}
section {
margin: 0 30px;
background-color: blue;
padding: 10px;
}
.title {
text-align: center;
}
.content {
background-color: red;
display: flex;
margin-left: -40px;
width: 100vw;
}
.content>h2 {
width: calc(100% / 3);
text-align: center;
}
<section>
<div class="title">
<h1>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="content">
<h2>Visit Us</h2>
<h2>Today's Deal</h2>
<h2>Book Now</h2>
</div>
</section>