Every Item to Have the Same Width as the Widest Element

All widths set to width of widest element

Yes. This can be done with pure CSS.

Here's a simple solution:

.container {  display: inline-grid;  grid-template-columns: 1fr 1fr 1fr;}

<div class="container">   <button>a normal button</button>   <button>tiny</button>   <button>a really, really, really wide button</button></div>

Getting flex to have equal width columns to the widest element

You are almost good, you should use inline-flex instead of flex to have the shrink-to-fit behavior thus the biggest button will define the width of the container and all the elements are by default stretched to that width:

.container {  margin-top: 15px;  text-align:center;}
.buttons {  display: inline-flex;  flex-direction: column;  padding: 15px;  background-color: gray;}
.buttons .btn {  display: block;  margin-bottom: 11px;}
.buttons .btn:last-child {  padding-bottom: 21px;}
a.btn {  display: inline-block;  text-align: center;  height: 35px;  padding: 0 20px;  min-width: 128px;  font-weight: bold;  color: #fff;  background-color: orange;  border: 2px solid #000;  white-space: nowrap;  text-decoration: none;}

<div class="container">
  <div class="buttons">    <a href="" class="btn alt">Plumbing</a>    <a href="" class="btn alt">Electrical</a>    <a href="" class="btn alt">Groundskeeping</a>    <a href="" class="btn alt">Construction</a>    <a href="" class="btn alt">Cleaning</a>    <a href="" class="btn alt">Security</a>    <a href="" class="btn alt">Trades Assistant</a>    <a href="" class="btn alt">General Duties</a>  </div>
</div>

Set same width to multiple vertical elements, according to widest one

You can wrap the items with a display:inline-block element,

and wrap that element in a text-align:center element so it would be centered:

.centered{ text-align:center; }
.wrapper{   display: inline-block;   font: 24px Arial;   text-align: left;}
.wrapper > div{  border: 2px dashed pink;  margin-bottom: 4px;}

<div class='centered'>  <div class='wrapper'>    <div contenteditable>try typing here</div>    <div contenteditable>aaaaa</div>    <div contenteditable>aaaaa aaaaa</div>    <div contenteditable>aa</div>    <div contenteditable>Every Item to Have the Same Width as the Widest Elementa</div>  </div></div>

Make all li same width as the widest

Here. Notice I added a class to your menu li's and that I added a body background to your css, because I couldn't notice your menus. Finally the trick is done by making the li elements 100% width

body {  background-color: green;}
.menu li {  width: 100%}
#navMain {}
#navMain ul {  padding: 0;  margin: 0;  z-index: 2;}
#navMain ul li {  margin-right: 5px;  text-align: center;}
#navMain li a {  display: block;  text-decoration: none;  color: white;  padding-left: 10px;  padding-right: 10px;}
#navMain li a:hover {  background-color: black;}
#navMain ul li:last-child {  margin-right: 0px;}
#navMain li {  position: relative;  float: left;  list-style: none;  margin: 0;  padding: 0;  font-size: 17px;  font-weight: bold;  color: #fff;}
#navMain ul ul {  position: absolute;  top: 20px;  visibility: hidden;  background-image: url(img/alphaBg.png);}
#navMain ul li ul li {  font-size: 12px;  margin-right: 0px;  text-align: left;}
#navMain ul li ul li:first-child {  padding-top: 5px;}
#navMain ul li:hover ul {  visibility: visible;}

<html>
<head></head>
<body>  <div id="navMain">    <ul>      <li><a href="#nogo">Forside</a>        <ul class="menu">          <li><a href="#nogo">1111111111111</a></li>          <li><a href="#nogo">Link 1-2</a></li>          <li><a href="#nogo">Link 1-3</a></li>          <li><a href="#nogo">Link 1-3</a></li>          <li><a href="#nogo">Link 1-3</a></li>          <li><a href="#nogo">Link 1-3</a></li>        </ul>      </li>      <li><a href="#nogo">Om Os</a>        <ul class="menu">          <li><a href="#nogo">Link 2-1</a></li>          <li><a href="#nogo">Link 2-2</a></li>          <li><a href="#nogo">Link 2-3</a></li>        </ul>      </li>      <li><a href="#nogo">Link 3</a>        <ul class="menu">          <li><a href="#nogo">Link 3-1</a></li>          <li><a href="#nogo">Link 3-2</a></li>          <li><a href="#nogo">Link 3-3</a></li>        </ul>      </li>    </ul>  </div></body>
</html>

CSS/ Flexbox: Same width as largest element, like columns

Use CSS tables:

Separation between rows with border-spacing
Borders in cells. You can use border-radius to round them.
Pseudo-element displayed as cell to fill available space at the right
white-space: nowrap to prevent cells from shrinking due to the pseudo-element.

.wrapper {  display: table;  border-spacing: 0 10px;}.row {  display: table-row;  border: 1px solid;}.row::after {  content: '';  display: table-cell;  width: 100%;  border: 1px #6AACC9;  border-style: solid none;}.element {  display: table-cell;  border: 1px solid #6AACC9;  border-right-color: #adadad;  border-left-style: none;  padding: 5px;  white-space: nowrap;}.element:first-child {  border-left-style: solid;  border-radius: 5px 0 0 5px;}

<div class="wrapper">  <div class="row">    <div class="element">iPhone </div>    <div class="element">Buy an iPhone now!</div>  </div>  <div class="row">    <div class="element">Airport Express </div>    <div class="element">Buy an Airport Express now!</div>  </div>  <div class="row">    <div class="element">iPad </div>    <div class="element">Buy an iPad now!</div>  </div></div>