CSS modifications:
.form-module {
border-bottom: 5px solid #33b5e5;
position: relative;
background: #ffffff;
width: 100%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
table {
border-spacing:0px;
}
td {
padding:0px;
}
Explanation of Changes:
The blue line serves as a border and was initially set at the top of the button's parent container instead of the bottom, hence the first modification.
Adjusted the padding to eliminate space between buttons and container edges, that's the second change, set it to 0px.
Both the table and button had a 1px border which was separating them from the container edges, hence the third adjustment to set those borders to 0px.
Additional tip:
If you're not already using it, utilizing browser inspector can be beneficial in understanding CSS behavior. Consider Bootstrap for a quicker solution without starting from scratch. It could save you a significant amount of time.
Best wishes.
In case needed, here's the complete updated CSS:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
table {
border-spacing:0px;
}
td {
padding:0px;
}
.pen-title {
padding: 50px 0;
text-align: center;
letter-spacing: 2px;
}
/* Additional styling goes here */
UPDATE:
You specified that the buttons should be positioned outside and above the form-module, necessitating a change in the HTML structure rather than just the CSS. We've removed the flex-container div nested inside the form-module div and relocated it after this container is closed. Since the buttons were styled based on .form-module properties, we created a new class "buttons". This ensures form-module and buttons have distinct style properties since they are in separate containers now.
To comprehend how blocks function within containers, reference:
http://www.w3schools.com/html/html_blocks.asp
Updated HTML:
<div class="flex-container buttons">
<article class="article">
<table>
<tr>
<td>
<button>Configurations</button>
</td>
<td>
<button>Create User </button>
</td>
<td>
<button>Update User</button>
</td>
<td>
<button>Create Group</button>
</td>
<td>
<button>Update Group</button>
</td>
</tr>
</table>
</article>
</div>
<div class="module form-module">
</div>
Revised CSS:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.buttons table {
/* Styling details */
}
.buttons td {
/* Styling details */
}
.buttons input {
/* Styling details */
}
/* More styles go here */
Complete revised CSS:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.buttons table {
/* Updated table styling */
}
.buttons td {
/* Updated cell styling */
}
.buttons input {
/* Adjusted input styling */
}
/* Other CSS rules continued... */